CSS入門(mén)教程：縱向下拉及多級(jí)彈出式菜單_Div+CSS教程

學(xué)完了上節(jié)教程，我想對(duì)于這于這節(jié)的學(xué)習(xí)就容易得多了。
橫向菜單是通過(guò)div及JavaSprict實(shí)現(xiàn)下拉控制，縱向菜單呢？答案是肯定的。我們現(xiàn)在要做的就是一個(gè)縱向菜單，css代碼：

ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;}
ul li { position:relative;}
li ul { position:absolute; left:119px; top:0; display:none;}
ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;}
ul li a:hover { background-color:#ddd;}
/*解決ul在IE下顯示不正確的問(wèn)題*/
* html ul li { float:left; height:1%;}
* html ul li a { height:1%;}
/* end */
li:hover ul,li.over ul { display:block;}

css代碼的編寫(xiě)基本上保持了與橫向?qū)Ш较嗤�的思路，不同的是，為了�?shí)現(xiàn)導(dǎo)航中的子導(dǎo)航與主導(dǎo)航在實(shí)現(xiàn)鼠標(biāo)交互的同時(shí)，保持其相對(duì)位置一致，我們使用了對(duì)ul li{}使用了position:relative;使其定位方式轉(zhuǎn)為相對(duì)定位。而對(duì)li ul{}即子導(dǎo)航采用了position:absolute;相對(duì)于導(dǎo)航的絕對(duì)定位方式，了其鼠標(biāo)交互后的位置一致。
也許您已經(jīng)發(fā)現(xiàn)，這里在css代碼未尾增加了一段注釋的定義* html ul li 與* html ul li a。這里用到的是CSS hack，這是因?yàn)椴煌�的瀏覽器對(duì)代碼的解析不同，用來(lái)實(shí)現(xiàn)在各瀏覽器上顯示相同的效果而使用的。這段代碼只有IE瀏覽器能解析，其它瀏覽器視而不見(jiàn)。有關(guān)css hack的更多教程，請(qǐng)?jiān)趙ww.wf0088.com網(wǎng)站內(nèi)查找。
本例的最終顯示效果如下：