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

Question

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

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

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

Answer 1

大概是這樣

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

感覺可以透過寫ul:hover和li:hover實現你說的效果，父節點hover類似於清除子節點的狀態，子節點恢復hover狀態

Answer 3

實作細節可參考 Eric Meyer談CSS(卷2) ，原理其實就是1樓提到的hover的處理

Answer 4

其實主要問題是如何控制第一個預設顯示的二級選單的顯示和隱藏對吧？可以透過為整個一級導航ul添加一個外套nav來並利用其:hover實現顯示控制。手機作答不方便寫程式碼，明天早上起床試試看。

看了樓上的答案，利用第一級導航選單的ul和li就好了。