問題描述

如何純用css去實現(xiàn)下面這個效果：

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

和QQ音樂導(dǎo)航的效果差不多求解?.?

問題解答

<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實現(xiàn)你說的效果，父節(jié)點hover類似于清除子節(jié)點的狀態(tài)，子節(jié)點恢復(fù)hover狀態(tài)

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

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

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