灰色简约三级CSS下拉菜单代码
生活随笔
收集整理的這篇文章主要介紹了
灰色简约三级CSS下拉菜单代码
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
代碼簡(jiǎn)介：
又一款CSS Menu，銀灰色下拉菜單，老外網(wǎng)站扒下來的，兼容性還不錯(cuò)。它最多可以支持三級(jí)，如果你的菜單項(xiàng)目很多，你可以自己擴(kuò)展，一般都是成對(duì)出現(xiàn)的標(biāo)簽，分清楚就可以了。
代碼內(nèi)容：
<!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> <title>灰色簡(jiǎn)約三級(jí)CSS下拉菜單代碼_網(wǎng)頁(yè)代碼站(www.webdm.cn)</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; } ul#navmenu { margin: 0; border: 0 none; padding: 0; width: 500px; list-style: none; height: 24px; } ul#navmenu li { margin: 0; border: 0 none; padding: 0; float: left; 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; display: block !important; display: inline; } ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; float: none !important; float: left; display: block; background: #EEE; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; } ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } ul#navmenu li:hover li a, ul#navmenu li.iehover li a { float: none; background: #EEE; color: #666; } 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; } ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } 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; } ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666; } 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; } 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> <script type="text/JavaScript"> navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].οnmοuseοver=function() { this.className+=" iehover"; } lis[i].οnmοuseοut=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover); </script> </head> <body> <h1>CSS Menu - Horizontal Modify by WebDm.cn</h1> <hr /> <ul id="navmenu"> <li><a href="/">My Blog</a></li> <li><a href="/">Work +</a> <ul> <li><a href="/">Websites +</a> <ul> <li><a href="http://www.webdm.cn">jQuery</a></li> <li><a href="#">Ajax</a></li> <li><a href="/">Extjs</a></li> </ul> </li> <li><a href="/">Links</a></li> <li><a href="/">Contact</a></li> </ul> </li> <li><a href="/">Learn+</a> <ul> <li><a href="/">CSS +</a> <ul> <li><a href="http://www.webdm.cn">WebDm.cn</a></li> <li><a href="http://www.webdm.cn">SpriteNav</a></li> </ul> </li> </ul> </li> <li><a href="http://www.webdm.cn">Messages</a></li> </ul> </body> </html> <br> <a href="http://www.webdm.cn">網(wǎng)頁(yè)代碼站</a> - 最專業(yè)的代碼下載網(wǎng)站 - 致力為中國(guó)站長(zhǎng)提供有質(zhì)量的代碼！代碼來自：http://www.webdm.cn/webcode/2dbd9c2f-ee73-46bd-94d3-47b4fa4c3f9b.html
轉(zhuǎn)載于:https://www.cnblogs.com/webdm/archive/2011/03/09/1977960.html
總結(jié)
以上是生活随笔為你收集整理的灰色简约三级CSS下拉菜单代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Swing组件集合的事件处理（二）
- 下一篇： 你在为谁打工？