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代码中看到我已将类当前父应用于父菜单菜单3 ，将类 currentChild 应用于子菜单项< em>菜单3子菜单项2 。这样，父母和孩子现在都会突出显示。我想要的是包含子菜单项（灰色）的行：菜单3子菜单项1 ，菜单3子菜单项2 和菜单3子菜单项3 仍然可见。

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

有没有办法让一个CSS类可以分配给父<li>（在示例中，菜单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之后添加悬停/活动效果。

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

2 个答案: