如何使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;
}

这种超文本标记语言：

<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页面后面的代码中的菜单构建超文本标记语言，并使用样式：当前父母和当前孩子来突出显示它们。这是工作，我一直无法弄清楚的是如何使第二级包含被点击的孩子保持可见。我尝试过在很多地方添加show： no，但是没有任何效果。我想知道是否有人可以帮助我，并提供一些建议，我需要添加到CSS来实现这一点？

编辑1：

我已经完成了代码并检查了它是否正常工作（您可以在这里看到它：http://jsfiddle.net/cesarvinas/ZQWe7/)。您可以在HTML代码中看到，我已将类current Parent应用于父菜单菜单3，并将类currentChild应用于子菜单项菜单3子菜单项2。此时，父对象和子对象将高亮显示。此外，我希望包含子菜单项（灰色）的行：菜单3子菜单项1、菜单3子菜单项2和菜单3子菜单项3保持可见。

正如我在主要帖子中所解释的，我已经在ASP的代码隐藏中添加了代码。net页面来构建HTML并在必要时分配CSS类。

有没有办法有一个CSS类，我可以分配给父

编辑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

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

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

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

编辑

您可以选择所有的currentParent子菜单锚定，如下所示：ul#nav li。currentParent ul li a，然后在currentChild上添加悬停/活动效果。

Answer 2

您可以使用以下css选择器ul#nav li来实现这一点。当前父级

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;
}
...

演示