這是一款折疊形可變導(dǎo)航，一般應(yīng)用在系統(tǒng)頁面左側(cè)它的最大優(yōu)勢是1菜單根據(jù)中繼器配置的列表動態(tài)加載整個導(dǎo)航菜單后期系統(tǒng)維護(hù)升級可快速增減菜單2二級導(dǎo)航菜單數(shù)量不等也可以正常工作突破局限#160 #。

以及文字居中5二級菜單欄設(shè)置邊框和背景顏色6當(dāng)鼠標(biāo)滑過的時候，二級菜單改變顏色，使用hover屬性設(shè)置CSS樣式7最后是將二級菜單欄的display設(shè)置為進(jìn)行隱藏，當(dāng)鼠標(biāo)懸停在一級菜單欄，display變?yōu)閎lock。

最終的效果就是添加一個主導(dǎo)航然后再在主導(dǎo)航里添加兩三個二級導(dǎo)航，這樣在你接下來的修改才能看到明顯的效果這一步就是設(shè)置二級導(dǎo)航的樣式，也就是圖片的箭頭所指的位置，這里可設(shè)置成1菜單樣式，2橫排樣式，兩種效果。

本人親測下面這些代碼是可以實(shí)現(xiàn)二級或多級導(dǎo)航菜單的 lt！ margin0pxpadding0px body overflowscrollfontsize12pxfontfamilyArial， Helvetica， sansserifcolor#000 a fontsize12pxfont。

你的nav里面設(shè)置了padding2em，2em，左右padding都是32px，而你的二級菜單li沒有設(shè)置width，默認(rèn)的寬度是最小的，設(shè)置一下width80px，或者對于一級菜單二級菜單分別設(shè)置padding。