Question

我有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;
}

这怎么不起作用？

Answer 1

您需要将子菜单嵌套在父级＆＃39; li＆＃39; 您的代码将是这样的：

<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＆amp; amp; li（最好是position：absolute）和css可以是： .parent-menu li：hover .sub-menu {display：block}

Answer 2

子菜单项必须是您正在悬停的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;
}

Answer 3

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

此行中的CSS

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

正在“nav”的第一个“li”中寻找“＃sub-menu-items ul li”。

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

显示有关悬停问题的子菜单

3 个答案: