Html 显示子菜单'；关于悬停问题的讨论

我有两份单独的菜单。当鼠标悬停在菜单#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>

---

这是怎么回事？

您需要将子菜单嵌套在父“li”中 您的代码如下所示：

<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&li（最好是位置：绝对）的样式，css可以是：

---

.parent menu li:hover.sub menu{display:block}

子菜单项必须是您悬停的li的子菜单项。这就是这个选择器的意思：

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

CSS下拉菜单如下所示：

<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>

HTML

---

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

这一行中的CSS

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

正在“nav”的第一个“li”中查找“#子菜单项ul li”

根据您的布局，只有将第二个菜单移到第一个菜单内，才能达到所需的效果

ul ul {
display: none;
}

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

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