CSS 如何在没有 javascript 的情况下将鼠标悬停在父级的同级项目上时隐藏当前子菜单项

Question

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

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> 

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

特里

Answer 1

简单的解决方案是尝试尽可能地降级。在这种情况下，我会在子菜单上设置背景颜色，并仅在悬停时提升 z-index，因此背景将覆盖其他子菜单 - [编辑] 它们仍然是可见，但文本不会重叠。然后用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 较低级联和更具体的（我通常必须处理大量此处状态类名 - 我认为您不会）应该允许子菜单重新出现。它并不像您想要的那么细粒度，但也差不多了。

Answer 2

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

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

Answer 3

CSS 中没有pseudo 类来触发mouse out 等效事件。你必须使用 javascript 来完成你想要做的事情。有很多菜单/插件可用，它们完全可以完成您正在做的事情（我的意思是不需要重新发明轮子）。

Answer 4

我确信仅通过 CSS 无法完成这种级别的细粒度控制。您需要使用 JS 更改 DOM 元素的状态。

Answer 5

没有 javascript 也可以做到。检查此页面中的答案。

水平 CSS 子导航问题！

为兄弟项目提供更高的 z-index，为兄弟项目提供更少的 z-index活动菜单的子项目。