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

Question

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

Child2 是当前页面:

parent1  *parent2*   parent3
             |
  child1  *child2*  child3

当我将鼠标悬停在 parent1 或 parent3 上时，他们的 child 会按需要显示。我的挑战是，当显示其他 parent 的 child 时，我无法弄清楚如何隐藏 parent2 的 child 。有没有一种 CSS 方法可以做到这一点？我知道当鼠标离开 parent2 和 parent2 的 child 时我可以使用 jquery 来隐藏 parent2 的 child ，但我宁愿不必使用 javascript 以获得最大的可用性。

这是一个直播 example

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，因此背景色将覆盖其他子菜单——[edit] 它们仍然是可见，但文本不会重叠。然后使用 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 在级联中较低且更具体(我通常必须处理很多此处状态的类名——不要认为你会的)应该允许子菜单重新出现。它没有您想要的那么细粒度，但也差不多。