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下顯示不正確的問題*/
* html ul li { float:left; height:1%;}
* html ul li a { height:1%;}
/* end */
li:hover ul,li.over ul { display:block;}
css代碼的編寫基本上保持了與橫向?qū)Ш较嗤乃悸罚煌氖?，為了實現(xiàn)導(dǎo)航中的了導(dǎo)航與主導(dǎo)航在實現(xiàn)鼠標交互的同時，保持其相對位置一致，我們使用了對ul li{}使用了position:relative;使其定位方式轉(zhuǎn)為相對定位。而對li ul{}即子導(dǎo)航采用了position:absolute;相對于導(dǎo)航的絕對定位方式，了其鼠標交互后的位置一致。
也許您已經(jīng)發(fā)現(xiàn)，這里在css代碼未尾增加了一段注釋的定義* html ul li 與* html ul li a。這里用到的是CSS hack，這是因為不同的瀏覽器對代碼的解析不同，用來實現(xiàn)在各瀏覽器上顯示相同的效果而使用的。這段代碼只有IE瀏覽器能解析，其它瀏覽器視而不見。
本例的最終顯示效果如下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
