html - 在悬停问题上显示子菜单

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

子菜单项需要是您悬停的 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;
}