单击孩子后如何使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 应用于子菜单项 菜单 3 子菜单项 2。有了这个，父母和孩子现在被突出显示。我还想要的是包含子菜单项（灰色）的行：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;
}

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

谢谢。

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

Answer 2

因此，您希望突出显示第二行中单击的项目，并在单击后显示相应的第二行。

如果菜单将使用标准链接（每次点击时页面刷新），最好使用 ASP 变量来表示当前页面，并根据该变量进行 CSS 修改以使正确的子菜单可见且正确突出显示的项目（您可以从 3dgoo 的 CSS 示例选择器 ul#nav li.currentParent > ul 开始）。

第二种情况是您没有在点击时刷新页面（例如，使用 AJAX 仅加载页面的一部分）。在这种情况下，您必须使用 Javascript/jQuery 来监听点击并相应地更改类。这意味着当您单击一个项目时，它的父元素 li 需要成为唯一的 currentChild 类，当然它的父元素 currentParent。

编辑

您可以像这样选择所有currentParent 子菜单锚点：ul#nav li.currentParent ul li a，然后在currentChild 上添加悬停/活动效果。