0

我有这个 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应用于子菜单项Menu 3 Submenu item 2。有了这个，父母和孩子现在被突出显示。我还想要的是包含子菜单项的行（灰色的）：Menu 3 Submenu item 1、Menu 3 Submenu item 2和Menu 3 Submenu item 3保持可见。

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

有没有办法让我可以分配给父级<li>（在示例中为Menu 3父级）的 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;
}

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

谢谢。

4

2 回答 2

0

您可以使用以下 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;
}
...

演示

于 2013-01-08T04:18:32.007 回答
0

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

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

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

编辑

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

于 2013-01-08T11:04:59.500 回答