Javascript jsp ul列表元素动态选择

情况如下： 我的导航栏中有一个嵌套的ul列表

某些链接

这是“我的互动程序”左侧的导航栏，右侧有与其相关的内容

因此，每当我选择一个嵌套的li时，我希望打开一个特定的li（main not nested）。 如何做到这一点，通过任何方式css或javascript

PS：我是一个noob网站开发者，所以请提供简单的解决方案，这个问题可能以前有人问过，但我找不到简单的答案，所以请不要给它太低的评价。

---

谢谢

如果您想在单击时显示它，可以使用CSS伪元素：target。这是你基本上必须做的：

您的HTML标记：（为每个父LI提供一个唯一的ID，并在该元素的锚点内添加一个元素）

---

我把一个小提琴放在一起。

如果嵌套的li元素是隐藏的，如何选择它？或者，您的意思是希望在选择（悬停）父li元素时显示嵌套的ul/li？这意味着，如果单击外部li，则嵌套的li将可见，我只想跟踪这些嵌套的li。谢谢你的关心他们谢谢你！！但我不是在寻找这个，我想要一个水平列表，当点击主li时，嵌套li打开。现在我使用jQuery，我现在想要的是ul的位置作为某个数字，并将该数字设置为ul的索引显示。@Sachin.Verma使用jQuery索引方法我正在使用它，我得到了索引。现在，如何显示与该索引相关的特定li。@Sachin.Verma您能否提供一个小提琴，展示您所拥有的。

<li>
<ul>
<li>
 Some link
</li>
</ul>
</li>
</ul>

<ul class="menu clearfix">
    <li id="a">
        <a href="#a">Item 1</a>
        <ul class="clearfix">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
        </ul>
    </li>
    <li id="b">
        <a href="#b">Item 2</a>
        <ul class="clearfix">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li id="c">
        <a href="#c">Item 3</a>
        <ul class="clearfix">
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
        </ul>
    </li>
</ul>

/* basic menu styling */
ul.menu {
    position:relative;
}

ul.menu li {
   display:block;
   position:relative;
   float:left;
}

ul.menu a {
  display:block;
  text-decoration:none;
}

ul.menu > li {
    border:1px solid #000;
    min-width:100px;
    margin-left:-1px;
}

/* set up nested ul's and hide them */
ul.menu > li ul {
    display:none;
    position:absolute;
    width:100%;
    top:0;
    left:0;
}

/* show them on click */
ul.menu > li:target ul {
    display:block;
}

ul.menu > li > ul > li {
    float:none;
    display:block;
}