Question

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

Child2是当前页面：

parent1  *parent2*   parent3
             |
  child1  *child2*  child3

当我将鼠标悬停在parent1或parent3上时，会根据需要显示其子项。我的挑战是，当其他父母的孩子被展示时，我无法弄清楚如何隐藏parent2的孩子。有没有CSS方法来实现这一目标？我知道我可以使用jquery来隐藏parent2的子节点，但是我不想使用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，因此bg将覆盖其他子菜单 - [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在级联中较低且更具体（我通常不得不处理很多这里的州级名称 - 不要认为你会），应该允许子菜单重新出现。它并不像你想要的那么精细，但差不多。

Answer 2

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

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

Answer 3

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

Answer 4

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

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

4 个答案: