問題描述

如何純用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í)再移開鼠標(biāo)時(shí)，回到默認(rèn)狀態(tài)（即顯示第一個(gè)導(dǎo)航的二級(jí)導(dǎo)航）

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

問題解答

大概是這樣

HTML:

.........

CSS：

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