显示子菜单的悬停问题

我有2个单独的菜单。当鼠标悬停在菜单＃1上的某些按钮上时，我想显示菜单＃2中的链接。如果可能的话，我想尝试用CSS来做到这一点。下面是我使用的一些CSS。显示子菜单的悬停问题

HTML：

<nav> 
    <ul> 
     <li><a href="http://www.xecforce.com">HOME</a></li> 
     <li><a href="#">NEWS</a></li> 
     <li><a href="#">FORUMS</a></li> 
       <li><a href="#">GAMES</a></li> 
       <li><a href="#">XECOM</a></li> 
    </ul> 
</nav> 

<div id="sub-menu-items"> 
<ul> 
    <li><a href="#">Test 1</a></li> 
    <li><a href="#">Test 2</a></li> 
</ul> 
</div>

CSS：

#sub-menu-items ul li { 
list-style-type: none; 
z-index: 99999; 
margin-right: 15px; 
padding-bottom: 8px; 
padding-top: 8px; 
display: none; 
text-shadow: 2px 3px 3px #080808; 
} 

nav ul li:first-child:hover #sub-menu-items ul li { 
display: inline; 
}

这是怎么不工作？

来源

2013-02-28 Josh Woelfel

子菜单项需要是您悬停的li的子项。那是什么这个选择意味着：

nav ul li:first-child:hover #sub-menu-items ul li

CSS下拉菜单都是这样完成的：

HTML

<ul> 
<li>Parent Item 
    <ul> 
     <li>Sub item</li> 
     <li>Sub item</li> 
    </ul> 
</li> 
<li>Parent Item 
    <ul> 
     <li>Sub item</li> 
     <li>Sub item</li> 
    </ul> 
</li> 
</ul>

CSS

ul ul { 
display: none; 
} 

ul > li:hover ul { 
display: block; 
}

来源

2013-02-28 04:54:03

您需要巢父母“礼”中子菜单，您的代码将是这样的：

<nav> 
    <ul class="parent-menu"> 
     <li><a href="http://www.xecforce.com">HOME</a></li> 
     <li><a href="#">NEWS</a> 
      <ul class="sub-menu"> 
      <li><a href="#">Test 1</a></li> 
      <li><a href="#">Test 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">FORUMS</a></li> 
     <li><a href="#">GAMES</a></li> 
     <li><a href="#">XECOM</a></li> 
</ul> 
</nav>

然后你就可以风格的子菜单UL &里（最好的位置是：绝对的）和css可以是： .parent-menu li：悬停.sub-menu {display：block}

来源

2013-02-28 04:52:40 Neeraj

的 '：悬停' 的状态元素只能影响其子元素。要使用：悬停来影响外部元素，您可以使用JavaScript。

在这一行

nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}

的CSS正在寻找的“导航”，“＃子菜单项UL丽”的第一个“李”里。

根据您的布局，只有在第一个菜单中移动第二个菜单时，才能达到所需效果。

来源

2013-02-28 04:55:04 earthdesigner

显示子菜单的悬停问题

回答

相关问题