css 二級菜單 實現(xiàn)代碼集合 修正版
更新時間:2009年06月26日 17:36:53 作者:
最近的網(wǎng)站要求使用二級菜單,本著“能用別人的就用別人的,不能用別人的就用自己的”的原則,在網(wǎng)上找到一個經(jīng)典的使用CSS制作的二級菜單,感覺不錯,先記錄下來,以備它用。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
第二種方法:
其實,所謂的二級菜單都差不多,無非就是為二級菜單定義一個層,當鼠標放在一級菜單上的時候顯示這個層,而將鼠標從一級菜單上移開時隱藏這個層。因此,通過這個經(jīng)典的CSS二級菜單又可以衍生出很多種不同的二級菜單,其中一種如下圖所示,彈簧式的。

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
也可以豎著的二級菜單變成橫著的,如下面兩個圖所示。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
以上幾種菜單在IE、Firefox、Opera、Flock瀏覽器下運行通過,但是有一個問題,就是在一級菜單中單擊鼠標后,二級菜單就不會消失了。這不能不說是一個bug啊。另外,還有一種橫著的二級菜單,這個菜單如下圖所示。該菜單在IE瀏覽器中運行通過,但在Firefox、Opera、 Flock瀏覽器中運行不正常。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
以上腳本之家文件打包下載
相關(guān)文章
詳解如何通過JavaScript實現(xiàn)函數(shù)重載
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)函數(shù)重載,文中的示例代碼講解詳細,對我們學習JavaScript有一定的幫助,感興趣的可以了解一下2023-01-01Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實例代碼
本文通過實例代碼給大家介紹了Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-06-06JavaScript中callee和caller的區(qū)別與用法實例分析
這篇文章主要介紹了JavaScript中callee和caller的區(qū)別與用法,結(jié)合實例形式分析了javascript中callee和caller的功能、區(qū)別、用法及操作注意事項,需要的朋友可以參考下2019-06-06js(JavaScript)實現(xiàn)TAB標簽切換效果的簡單實例
本篇文章主要是對js(JavaScript)實現(xiàn)TAB標簽切換效果的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02