html - 单击子项后如何使 CSS 菜单保持可见

Question

我有这个 CSS:

#menuBar {
  /*width: 960px;*/
  height: 35px;
  clear: both;
}

ul#nav {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #0068b4;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  line-height: 35px;
  color: #ffffff;
  text-decoration: none;
  margin: 0;
  padding: 0 30px;
  background-color: #0068b4;
}

/* APPLIES THE ACTIVE STATE TO PARENT*/
ul#nav .currentParent a, ul#nav li:hover > a  {
  color: #ffffff;
  text-decoration: none;
  background: #005899;
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 97%;
  height: 35px;
  margin: 35px 0 0 0;
  background-color: #e0e0e0;
}

ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

/* APPLIES THE ACTIVE STATE TO CHILD*/
ul#nav li ul li.currentChild a, ul#nav li:hover > ul li a:hover {
  color: #000000;
  text-decoration: none;
  background-color: #afafaf;
}

还有这个 HTML:

<div id="menuBar">
    <ul id="nav">
    <li><a href="javascript: void;">Menu 1</a>
        <ul>
            <li><a href="menu1submenuitem1.html">Menu 1 Submenu item 1</a></li>
            <li><a href="menu1submenuitem2.html">Menu 1 Submenu item 2</a></li>
            <li><a href="menu1submenuitem3.html">Menu 1 Submenu item 3</a></li>
        </ul>
    </li>
    <li><a href="javascript: void;">Menu 2</a>
        <ul>
            <li><a href="menu2submenuitem1.html">Menu 2 Submenu item 1</a></li>
            <li><a href="menu2submenuitem2.html">Menu 2 Submenu item 2</a></li>
        </ul>
    </li>
    <li class="currentParent"><a href="javascript: void;">Menu 3</a>
        <ul>
            <li><a href="menu3submenuitem1.html">Menu 3 Submenu item 1</a></li>
            <li class="currentChild"><a href="menu3submenuitem2.html">Menu 3 Submenu item 2</a></li>
            <li><a href="menu3submenuitem3.html">Menu 3 Submenu item 3</a></li>
        </ul>
    </li>   
    </ul>
</div>

我用它来显示两级水平菜单。我想要实现的是，当单击第二级的选项时，我希望父级和子级本身保持突出显示。为此，我实际上是在我的 ASP.net 页面的代码后面构建菜单的 HTML，并使用样式:currentParent 和 currentChild 来突出显示它们。那行得通，我一直无法弄清楚的是如何使包含被单击以保持可见的子级的第二级。我试过添加 display: none在很多地方，但没有任何效果。我想知道是否有人可以帮助我解决这个问题并就我需要添加到 CSS 中的修改提出一些建议以实现此目的？

编辑 1:

我已经完成了代码并检查了它是否正常工作(您可以在这里看到它:http://jsfiddle.net/cesarvinas/ZQWe7/)。您可以在 HTML 代码中看到，我已将类 current Parent 应用到父菜单 Menu 3 并将类 currentChild 应用到子菜单项 < em>菜单 3 子菜单项 2。有了这个， parent 和 child 现在被突出显示。我还想要的是包含子菜单项(灰色项)的行:Menu 3 Submenu item 1、Menu 3 Submenu item 2 和 菜单 3 子菜单项 3 保持可见。

正如我在主帖中所解释的那样，我已将代码添加到 ASP .net 页面的代码隐藏中以构建 HTML 并在必要时分配 CSS 类。

有没有办法让我可以分配给父类的 CSS 类 <li> (在示例中，Menu 3 父级)使其子级可见？

编辑 2

感谢我在这里收到的帮助，特别是来自 3dgoo 的帮助，这几乎完成了。我在这里更新了示例:http://jsfiddle.net/cesarvinas/ZQWe7/5/ .但是，为了使不是当前的子菜单项保持银色(而不是 3dgoo 示例中的蓝色)，我必须再创建一个 CSS 类“.notselected”，我将其应用于那些未选中的子菜单项.我的问题是:有没有一种方法可以在不添加额外 CSS 类的情况下实现相同的效果？这就是我所做的:

ul#nav li ul li.notselected a,
ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

和 HTML:

<li class="currentParent"><a href="#">Menu 3</a>
    <ul>
        <li class="notselected"><a href="#">Menu 3 Submenu item 1</a></li>
        <li class="currentChild"><a href="#">Menu 3 Submenu item 2</a></li>
        <li class="notselected"><a href="#">Menu 3 Submenu item 3</a></li>
    </ul>
</li>   

我在 CSS 中试过这个:

ul#nav li ul li a,
ul#nav li:hover > ul li a {
  float: left;
  line-height: 35px;
  color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #e0e0e0;
}

并删除 class="notselected"来自 HTML，但它不起作用。这是为什么？

谢谢。

Answer 1

您可以通过使用以下 css 选择器 ul#nav li.currentParent > ul 来完成此操作，如下所示:

CSS

...
ul#nav li.currentParent > ul, // Add this
ul#nav li:hover > ul {
    position: absolute;
    display: block;
    width: 97%;
    height: 35px;
    margin: 35px 0 0 0;
    background-color: #e0e0e0;
}
ul#nav li:hover > ul { // And add these three lines
    z-index: 10;
}
...

Demo