銀灰色三級CSS下拉菜單_菜單導航特效

又一款CSS Menu，銀灰色下拉菜單，老外網站扒下來的，兼容性還不錯。它最多可以支持三級，假如你的菜單項目很多，你可以自己擴展，一般都是成對出現的標簽，分清楚就可以了。

<!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" mrc="text/html; charset=utf-8" /> 
<title>CSS Menu - www.zhaotila.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].onmouseover=function() { 
this.className+=" iehover"; 
} 
lis[i].onmouseout=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 mb5u.com</h1> 
<hr /> 
<ul id="navmenu"> 
<li><a href="/">My Blog</a></li> 
<li><a >Work +</a> 
<ul> 
<li><a >Websites +</a> 
<ul> 
<li><a >jQuery</a></li> 
<li><a >Ajax</a></li> 
<li><a >Extjs</a></li> 
</ul> 
</li> 
<li><a >Links</a></li> 
<li><a >Contact</a></li> 
</ul> 
</li> 
<li><a href="/">Learn+</a> 
<ul> 
<li><a href="/">CSS +</a> 
<ul> 
<li><a >mb5u.com</a></li> 
<li><a >SpriteNav</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a >Messages</a></li> 
</ul> 
</body> 
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

銀灰色三級CSS下拉菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些