問(wèn)題描述

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

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

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

問(wèn)題解答

<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：

感覺(jué)可以通過(guò)寫(xiě)ul:hover和li:hover實(shí)現(xiàn)你說(shuō)的效果，父節(jié)點(diǎn)hover類(lèi)似于清除子節(jié)點(diǎn)的狀態(tài)，子節(jié)點(diǎn)恢復(fù)hover狀態(tài)

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

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

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