CSS多級(jí)水平導(dǎo)航菜單是Web開發(fā)中應(yīng)用非常廣泛的一種頁面導(dǎo)航方式,它的能力包括遞歸重復(fù)嵌套、動(dòng)態(tài)向下菜單擴(kuò)展、響應(yīng)式設(shè)計(jì)等,同時(shí)還有很多自定義樣式和動(dòng)畫的擴(kuò)展。
.nav { display: inline-block; position: relative; } .nav li { display: inline-block; } .nav ul { position: absolute; left: 0; top: 100%; z-index: 999; background: #fff; border: 1px solid #ccc; display: none; } .nav ul li { display: block; } .nav li:hover >ul { display: block; }
這段CSS代碼展示了一個(gè)很簡單的多級(jí)水平導(dǎo)航菜單,其中.nav是導(dǎo)航菜單的外層容器,每一個(gè)li代表一個(gè)菜單項(xiàng)。當(dāng)鼠標(biāo)懸浮在一個(gè)菜單項(xiàng)上時(shí),它的下一層子菜單將顯示出來。
在這個(gè)方法中,我們使用了position屬性來創(chuàng)建菜單項(xiàng)之間正確的層次結(jié)構(gòu),并且使用z-index屬性來確保下一層子菜單能夠覆蓋住前一層的菜單。使用:hover偽類選擇器可以在鼠標(biāo)懸浮在一個(gè)菜單項(xiàng)上時(shí)觸發(fā)下一層子菜單的顯示,同時(shí)使用display:none屬性來確保菜單在初始化時(shí)隱藏。
另外,這個(gè)方法還使用了一些其他的技術(shù)來滿足不同的需求,在實(shí)際的開發(fā)中,可以根據(jù)需要進(jìn)行定制和調(diào)整。