我有一个这样的菜单结构:
<ul class"menu">
<li>
<a>item1</a>
<ul>
<li><a>subitem1</a></li>
<li><a>subitem2</a></li>
<li><a>subitem3</a></li>
<li><a>subitem4</a></li>
<li>
<a>item2</a>
<ul class="sub-ul-2">
<li><a>subitem5</a></li>
<li><a>subitem6</a></li>
<li><a>subitem7</a></li>
<li><a>subitem8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我的要求是,当我将鼠标悬停在item1上时, subitem1,subitem2,subitem3,subitem4 只需要显示,而 subitem5 - 8 不需要显示。
当我将鼠标悬停在item2上时,只需要显示 subitem5 - 8 。我怎样才能通过使用 css 来实现这一点?
我努力了:
ul.menu ul{
display: none;
}
ul.menu li:hover:first-child ul {
display:block;
}