快捷導(dǎo)航

css 二級菜單實現(xiàn)代碼集合修正版

更新時間：2009年06月26日 17:36:53 作者：

最近的網(wǎng)站要求使用二級菜單，本著“能用別人的就用別人的，不能用別人的就用自己的”的原則，在網(wǎng)上找到一個經(jīng)典的使用CSS制作的二級菜單，感覺不錯，先記錄下來，以備它用。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜單演示</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li><a href="http://www.fzitv.net">腳本之家</a> <ul> <li><a href="http://www.fzitv.net/list/index_96.htm" title="腳本專欄"><span>腳本專欄</span></a></li> <li><a href="http://www.fzitv.net/list/index_1.htm" title="網(wǎng)絡(luò)編程"><span>網(wǎng)絡(luò)編程</span></a></li> <li><a href="http://www.fzitv.net/list/index_104.htm" title="數(shù)據(jù)庫"><span>數(shù)據(jù)庫</span></a></li> <li><a href="http://www.fzitv.net/codes/index.html" title="源碼下載"><span>源碼下載</span></a></li> <li><a href="http://www.fzitv.net/softs/index.html" title="軟件下載"><span>軟件下載</span></a></li> </ul> </li> <li><a href="#">服務(wù)介紹</a> <ul> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二服務(wù)二</a></li> <li><a href="#">服務(wù)二服務(wù)二服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">關(guān)于我們</a> <ul> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四111</a></li> </ul> </li> <li><a href="#">在線演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">聯(lián)系我們</a> <ul> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

第二種方法：
其實，所謂的二級菜單都差不多，無非就是為二級菜單定義一個層，當(dāng)鼠標(biāo)放在一級菜單上的時候顯示這個層，而將鼠標(biāo)從一級菜單上移開時隱藏這個層。因此，通過這個經(jīng)典的CSS二級菜單又可以衍生出很多種不同的二級菜單，其中一種如下圖所示，彈簧式的。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜單演示</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li><a href="#">產(chǎn)品介紹</a> <ul> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> </ul> </li> <li><a href="#">服務(wù)介紹</a> <ul> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二服務(wù)二</a></li> <li><a href="#">服務(wù)二服務(wù)二服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">關(guān)于我們</a> <ul> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四111</a></li> </ul> </li> <li><a href="#">在線演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">聯(lián)系我們</a> <ul> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

也可以豎著的二級菜單變成橫著的，如下面兩個圖所示。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜單演示</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li><a href="#">產(chǎn)品介紹</a> <ul> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> </ul> </li> <li><a href="#">服務(wù)介紹</a> <ul> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二服</a></li> <li><a href="#">服務(wù)二服</a></li> <li><a href="#">服務(wù)二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案</a></li> <li><a href="#">案例三案</a></li> </ul> </li> <li><a href="#">關(guān)于我們</a> <ul> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四111</a></li> </ul> </li> <li><a href="#">在線演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> </ul> </li> <li><a href="#">聯(lián)系我們</a> <ul> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜單演示</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li><a href="#">產(chǎn)品介紹</a> <ul> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> </ul> </li> <li><a href="#">服務(wù)介紹</a> <ul> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二服</a></li> <li><a href="#">服務(wù)二服</a></li> <li><a href="#">服務(wù)二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案</a></li> <li><a href="#">案例三案</a></li> </ul> </li> <li><a href="#">關(guān)于我們</a> <ul> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四111</a></li> </ul> </li> <li><a href="#">在線演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示</a></li> </ul> </li> <li><a href="#">聯(lián)系我們</a> <ul> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

以上幾種菜單在IE、Firefox、Opera、Flock瀏覽器下運行通過，但是有一個問題，就是在一級菜單中單擊鼠標(biāo)后，二級菜單就不會消失了。這不能不說是一個bug啊。另外，還有一種橫著的二級菜單，這個菜單如下圖所示。該菜單在IE瀏覽器中運行通過，但在Firefox、Opera、 Flock瀏覽器中運行不正常。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜單演示</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li><a href="#">產(chǎn)品介紹</a> <ul> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> <li><a href="#">產(chǎn)品一</a></li> </ul> </li> <li><a href="#">服務(wù)介紹</a> <ul> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> <li><a href="#">服務(wù)二服務(wù)二</a></li> <li><a href="#">服務(wù)二服務(wù)二服務(wù)二</a></li> <li><a href="#">服務(wù)二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">關(guān)于我們</a> <ul> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四</a></li> <li><a href="#">我們四111</a></li> </ul> </li> <li><a href="#">在線演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">聯(lián)系我們</a> <ul> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> <li><a href="#">聯(lián)系聯(lián)系聯(lián)系</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

以上腳本之家文件打包下載

您可能感興趣的文章: