css3 - 關于純用css寫導航鼠標移入事件的問題？

問題描述

如何純用css去實現下面這個效果：

一級導航的第一個導航的二級導航默認是顯示的（其他導航項目的二級導航是隱藏的display：none；），當鼠標移到一級導航的其他導航項目時，默認顯示的第一個二級導航隱藏，與此同時，鼠標移入的導航項的二級導航顯示，這時再移開鼠標時，回到默認狀態（即顯示第一個導航的二級導航）

和QQ音樂導航的效果差不多求解?.?

問題解答

<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;}回答2：

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

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

其實主要問題是如何控制第一個默認顯示的二級菜單的顯示和隱藏對吧？可以通過給整個一級導航ul添加一個外套nav來并利用其:hover實現顯示控制。手機作答不方便寫代碼，明天早上起來試試。

看了樓上的答案，利用第一級導航菜單的ul和li即可了。