css3 - 关于纯用css写导航鼠标移入事件的问题？

Question

如何纯用css去实现下面这个效果：

一级导航的第一个导航的二级导航默认是显示的（其他导航项目的二级导航是隐藏的display：none；），
当鼠标移到一级导航的其他导航项目时，默认显示的第一个二级导航隐藏，
与此同时，鼠标移入的导航项的二级导航显示，这时再移开鼠标时，回到默认状态（即显示第一个导航的二级导航）

和QQ音乐导航的效果差不多
求解ㅜ.ㅜ

Answer 1

Probably like this

HTML:

<ul class="nav">
    <li>
        <ul class="subnav">...</ul>
    </li>
    <li>
        <ul class="subnav">...</ul>
    </li>
    <li>
        <ul class="subnav">...</ul>
    </li>
</ul>

CSS:

.nav li:first-child .subnav{
    display: block;
}
.nav:hover li:first-child .subnav{
    display: none;
}
.nav:hover li:hover .subnav{
    display: block;
}

Answer 2

I feel that the effect you mentioned can be achieved by writing ul:hover and li:hover. The parent node hover is similar to clearing the state of the child node, and the child node restores the hover state

Answer 3

For implementation details, please refer to Eric Meyer on CSS (Volume 2). The principle is actually the processing of hover mentioned on the first floor

Answer 4

In fact, the main problem is how to control the display and hiding of the first secondary menu that is displayed by default, right? You can add a coat nav to the entire first-level navigation ul and use its :hover to achieve display control. It's not convenient to write code when answering on mobile phone. I'll try it when I get up tomorrow morning.

After reading the answer above, just use the ul and li of the first-level navigation menu.