1

我正在尝试创建一个两级水平导航菜单（或菜单栏），当您将鼠标悬停在父菜单项上时，它会显示子子菜单项。如果选择了其中一个子项，则父项具有一个视觉指示符，表明当前页面对应于其子项之一，并且其子项保持显示。

Child2 是当前页面：

parent1  *parent2*   parent3
             |
  child1  *child2*  child3

当我将鼠标悬停在 parent1 或 parent3 上时，他们的孩子会根据需要显示。我的挑战是，当显示其他父母的孩子时，我无法弄清楚如何隐藏 parent2 的孩子。有没有 CSS 方法来实现这一点？我知道当鼠标移出 parent2 和 parent2 的孩子时，我可以使用 jquery 来隐藏 parent2 的孩子，但我宁愿不必使用 javascript 以获得最大的可用性。

这是一个活生生的例子

CSS：

ul.AspNet-Menu 
{
    position: relative;
}

ul.AspNet-Menu, 
ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;
}

ul.AspNet-Menu li
{
    position: static;
    list-style: none;
    float: left;
}

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}
ul.AspNet-Menu ul
{
    visibility: hidden;   
    position: absolute;
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: hidden;
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible;
}

.main-nav2 .AspNet-Menu-Horizontal{
  margin: 0;
  padding: 0;
  font: bold 13px/16px Arial, sans-serif;
  position: absolute;
  top: 21px;
  left: 290px;
}

.main-nav2 ul.AspNet-Menu li {
  display: inline;
}

.main-nav2 ul.AspNet-Menu li a,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink {
  color: #fff;
  background: url(../../nav-bg.gif) no-repeat 0 -24px;
  height: 24px;
  text-decoration: none;
  margin: 0 1px 0 0;
}

.main-nav2 ul.AspNet-Menu li a span,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink span {
  background: url(../../nav-bg-right.gif) no-repeat 100% -24px;
  padding: 4px 12px 4px 12px;
  cursor: pointer;
}

.main-nav2 ul.AspNet-Menu li a:hover,
.main-nav2 ul.AspNet-Menu li a.active {
  background-position: 0 0;
  color: #1b8db3;
}

.main-nav2 ul.AspNet-Menu li a:hover span,
.main-nav2 ul.AspNet-Menu li a.active span {
  background-position: 100% 0;
}

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a
{
  background-position: 0 0;
  color: #1b8db3;
}

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a span,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a span
{
  background-position: 100% 0;
}

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul
{
    visibility: visible;
}

.main-nav2 ul.AspNet-Menu ul{
    width:500px;
}

.main-nav2 ul.AspNet-Menu ul li {
  font: 12px/20px Arial, sans-serif;
  padding: 0 5px 0 0; 
  display: inline;
}

.main-nav2 ul.AspNet-Menu ul li a {
  text-decoration: none;
  color: #1b8db3;
  padding: 0 0 0 12px;
  background-image:none;
}

.main-nav2 ul.AspNet-Menu ul li a:hover {
  text-decoration: underline;
}

HTML：

<div class="main-nav2" id="ctl00_MainMenu"> 
  <div class="AspNet-Menu-Horizontal"> 
      <ul class="AspNet-Menu"> 
        <li class="AspNet-Menu-Item"> 
          <a href="javascript:return false;#1"> 
            <span> A Menu Option</span></a> 
          <ul> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/A1.aspx"> 
                A1 SubMenu Option</a> 
            </li> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/A2.aspx"> 
                A2 SubMenu Option</a> 
            </li> 
          </ul> 
        </li> 
        <li class="AspNet-Menu-Item"> 
          <a href="javascript:return false;"> 
            <span> B Menu Option</span></a> 
          <ul> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/B1.aspx"> 
                B1 SubMenu Option</a> 
            </li> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/B2.aspx"> 
                B2 SubMenu Option</a> 
            </li> 
          </ul> 
        </li> 
        <li class=" AspNet-Menu-Selected"> 
          <a href="/CSSMenu/C.aspx"> 
            <span> C Menu Option</span></a> 
        </li> 
      </ul> 
  </div> 
</div>

非常感谢您提供任何提示或帮助！

特里

4

5 回答 5

2

简单的解决方案是尝试尽可能地降级。在这种情况下，我会在子菜单上设置背景颜色并仅在悬停时提升 z-index，因此 bg 将覆盖其他子菜单—— [编辑]它们仍然可见，但文本不会重叠。然后使用 javascript 使其成为您真正想要的。

更复杂的解决方案意味着您必须让所有子菜单占用相同的空间——一种方法是使用负边距，然后使用填充来覆盖该空间——并让显示的任何子菜单覆盖打开的菜单，再次通过更大的 z-index（在悬停时应用于父级）。

编辑我一直用来处理这种情况的另一件事是执行以下操作

ul:hover ul { display:none; } //or in your case, set to invisible
ul li:hover ul { display:block; } //in your case, set to visible

这意味着当 UL 悬停在子菜单上时子菜单将消失，因为 li:hover 在级联中较低且更具体（我通常必须处理许多此处状态的类名——不认为你会这样做） ，应该允许子菜单重新出现。它不像你想要的那么细粒度，但几乎。

于 2010-03-04T23:00:41.907 回答
0

它可以在没有 javascript 的情况下完成。检查此页面中的答案。

水平 CSS 子导航问题！

给同级子项更高的 z-index 和更少的 z-index 给活动菜单的子项。

于 2012-11-07T07:42:46.013 回答
0

如果您想要的是，当用户单击 child2 选择时，响应会生成一个显示 child2 的页面，但当用户将鼠标悬停在 parent1 或 parent3 上时 child2 应该消失，那么您需要使用 JavaScript。原因是它是一个以不同方式影响 DOM 中多个节点的事件。CSS 仅以相同的方式影响 DOM 中的 1+ 个节点，并且通常仅在页面加载时。例外是伪类，如 :hover 会影响页面加载后的显示。

如果您需要 CSS 多菜单解决方案，或者只是想看看一个可以帮助您找到答案的好解决方案，请查看此 GRC CSS。我从中学到了很多，并将其破解为我使用过无数次的解决方案。

于 2010-03-04T21:49:58.997 回答
0

css中没有pseudo类来触发mouse out等效事件。您必须使用 javascript 来完成您正在尝试做的事情。有很多可用的菜单/插件完全可以满足您的需求（我的意思是说不需要重新发明轮子）。

于 2010-03-04T21:50:28.363 回答
0

我很肯定你不能仅通过 CSS 完成这种级别的细粒度控制。您需要使用 JS 更改 DOM 元素的状态。

于 2010-03-04T23:23:59.293 回答