主頁 > 知識庫 > 用CSS實現(xiàn)下拉菜單的多種方法

用CSS實現(xiàn)下拉菜單的多種方法

橫向下拉菜單

<!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" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>橫向下拉菜單</title> <style type="text/css">  </style>  </head> <body> <ul id="nav"> <li>菜單一 <ul> <li>菜單一</li> <li>菜單一</li> <li>菜單一</li> <li>菜單一</li> <li>菜單一</li> <li>菜單一</li> </ul> </li> <li>菜單二 <ul> <li>菜單二</li> <li>菜單二</li> <li>菜單二</li> <li>菜單二</li> <li>菜單二</li> </ul> </li> <li>菜單三 <ul> <li>菜單三</li> <li>菜單三</li> <li>菜單三</li> <li>菜單三</li> <li>菜單三</li> </ul> </li> <li>菜單四 <ul> <li>菜單四</li> <li>菜單四</li> <li>菜單四</li> <li>菜單四</li> <li>菜單四</li> </ul> </li> <li>菜單五 <ul> <li>菜單五</li> <li>菜單五</li> <li>菜單五</li> <li>菜單五</li> <li>菜單五</li> </ul> </li> <li>菜單六 <ul> <li>菜單六</li> <li>菜單六</li> <li>菜單六</li> <li>菜單六</li> <li>菜單六</li> </ul> </li> </ul> </div> </body> </html>

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

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>產(chǎn)品介紹 <ul> <li>產(chǎn)品一</li> <li>產(chǎn)品一</li> <li>產(chǎn)品一</li> <li>產(chǎn)品一</li> <li>產(chǎn)品一</li> <li>產(chǎn)品一</li> </ul> </li> <li>服務(wù)介紹 <ul> <li>服務(wù)二</li> <li>服務(wù)二</li> <li>服務(wù)二</li> <li>服務(wù)二服務(wù)二</li> <li>服務(wù)二服務(wù)二服務(wù)二</li> <li>服務(wù)二</li> </ul> </li> <li>成功案例 <ul> <li>案例三</li> <li>案例</li> <li>案例三案例三</li> <li>案例三案例三案例三</li> </ul> </li> <li>關(guān)于我們 <ul> <li>我們四</li> <li>我們四</li> <li>我們四</li> <li>我們四111</li> </ul> </li> <li>在線演示 <ul> <li>演示</li> <li>演示</li> <li>演示</li> <li>演示演示演示</li> <li>演示演示演示</li> <li>演示演示</li> <li>演示演示演示</li> <li>演示演示演示演示演示</li> </ul> </li> <li>聯(lián)系我們 <ul> <li>聯(lián)系聯(lián)系聯(lián)系聯(lián)系聯(lián)系</li> <li>聯(lián)系聯(lián)系聯(lián)系</li> <li>聯(lián)系</li> <li>聯(lián)系聯(lián)系</li> <li>聯(lián)系聯(lián)系</li> <li>聯(lián)系聯(lián)系聯(lián)系</li> <li>聯(lián)系聯(lián)系聯(lián)系</li> </ul> </li> </ul> </body> </html>

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

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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Menu - Horizontal</title> <style type="text/css">  body { margin: 0; padding: 30px; background: #FFF; color: #666; } h1 { font: bold 16px Arial, Helvetica, sans-serif; } p { font: 11px Arial, Helvetica, sans-serif; } a { color: #900; text-decoration: none; } a:hover { background: #900; color: #FFF; } /*CSS Code for Menu Begin:*/ /* Root = Horizontal, Secondary = Vertical */ ul#navmenu { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px; } ul#navmenu li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 24px; } ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 24px; left: 0; } ul#navmenu ul li { float: none; /*For Gecko*/ display: block !important; display: inline; /*For IE*/ } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; background: #EEE; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { float: none; background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666; } /* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF; } ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; } </style>  </head> <body> <h1>CSS Menu - Horizontal</h1> <hr /> <ul id="navmenu"> <li>Blog</li> <li>Work + <ul> <li>Websites + <ul> <li>qrayg</li> <li>qArcade</li> <li>qLoM</li> <li>qDT</li> </ul> </li> <li>Pen and Ink</li> <li>Free Interfaces</li> </ul> </li> <li>Learn + <ul> <li>Fireworks + <ul> <li>aquaButton</li> <li>aquaButton2</li> <li>waterDrop</li> <li>lightFX</li> <li>lightFX2</li> </ul> </li> <li>CSS + <ul> <li>footerStick</li> <li>spriteNav</li> <li>@import</li> </ul> </li> </ul> </li> <li>Info</li> <li>Contact</li> </ul> </body> </html>

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

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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Menu - Vertical</title> <style type="text/css"> body { margin: 0; padding: 30px; background: #FFF; color: #666; } h1 { font: bold 16px Arial, Helvetica, sans-serif; } p { font: 11px Arial, Helvetica, sans-serif; } a { color: #900; text-decoration: none; } a:hover { background: #900; color: #FFF; } /*CSS Code for Menu Begin:*/ /* Root = Vertical, Secondary = Vertical */ ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; /*For KHTML*/ list-style: none; } ul#navmenu li { display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: #EEE; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666; } /* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; } </style>  </head> <body> <h1>CSS Menu - Vertical</h1> <hr /> <ul id="navmenu"> <li>Blog</li> <li>Work + <ul> <li>Websites + <ul> <li>qrayg</li> <li>qArcade</li> <li>qLoM</li> <li>qDT</li> </ul> </li> <li>Pen and Ink</li> <li>Free Interfaces</li> </ul> </li> <li>Learn + <ul> <li>Fireworks + <ul> <li>aquaButton</li> <li>aquaButton2</li> <li>waterDrop</li> <li>lightFX</li> <li>lightFX2</li> </ul> </li> <li>CSS + <ul> <li>footerStick</li> <li>spriteNav</li> <li>@import</li> </ul> </li> </ul> </li> <li>Info</li> <li>Contact</li> </ul> </body> </html>

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

CSS實現(xiàn)的中英文雙語導航菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Keywords" content="bilingual menu,中英文雙語菜單" /> <meta http-equiv="Description" content="完全用CSS實現(xiàn)的中英文雙語導航菜單" /> <meta content="all" name="robots" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="http://www.forest53.com" /> <title>完全用CSS實現(xiàn)的中英文雙語導航菜單</title> <style type="text/css"> a{ color: #FFFF99; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } #nav{ padding: 10px 10px 0; font-size: 12px; font-weight: bold; margin: 1em 0 0; list-style:none; } #nav li{ float: left; margin-right: 1px; } .bi{ position: relative; z-index: 0; } .bi:hover{ z-index: 99; } .bi:hover span{ visibility: visible; top: 0; left: 0; cursor: pointer; } .bi span{ position: absolute; left: -999em; visibility: hidden; } #nav li a,.bi:hover span{ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } #nav li a:hover,.bi:hover span{ color: #FFFFFF; background: #DC4E1B; } .bi:hover span{ padding-top: 2px; } #navbar{ background: #DC4E1B; height: 8px; overflow: hidden; clear: both; } </style> <link href="../css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div   class="wuy2gm0"   id="top"> <ul id="nav"> <li>Home<span>首　頁</span></li> <li>Blog<span>日志</span></li> <li>guestbook<span>留言本</span></li> <li>Pickbar<span>精品吧</span></li> <li>fansir<span>樊SIR</span></li> </ul> <div   class="swacu0s"   id="navbar"></div> </body> </html>

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

您可能感興趣的文章:

iOS實現(xiàn)簡單的二級菜單效果
IOS中safari下的select下拉菜單文字過長不換行的解決方法
IOS代碼筆記之下拉菜單效果
iOS中長按調(diào)出菜單組件UIMenuController的使用實例
iOS從App跳轉(zhuǎn)至系統(tǒng)設(shè)置菜單各功能項的編寫方法講解
iOS實現(xiàn)頂部標簽式導航欄及下拉分類菜單
如何使用jQuery技術(shù)開發(fā)ios風格的頁面導航菜單
JavaScript 下拉菜單實現(xiàn)代碼
css+js下拉菜單
iOS下拉選擇菜單簡單封裝

標簽：樂山沈陽長治紅河河南滄州上海新疆

巨人網(wǎng)絡(luò)通訊聲明：本文標題《用CSS實現(xiàn)下拉菜單的多種方法》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。