银灰色三级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.mb5u.com</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 href="http://mb5u.com">Work +</a> 
<ul> 
<li><a href="http://mb5u.com">Websites +</a> 
<ul> 
<li><a href="http://mb5u.com">jQuery</a></li> 
<li><a href="http://mb5u.com">Ajax</a></li> 
<li><a href="http://mb5u.com">Extjs</a></li> 
</ul> 
</li> 
<li><a href="http://mb5u.com">Links</a></li> 
<li><a href="http://mb5u.com">Contact</a></li> 
</ul> 
</li> 
<li><a href="/">Learn+</a> 
<ul> 
<li><a href="/">CSS +</a> 
<ul> 
<li><a href="http://mb5u.com">mb5u.com</a></li> 
<li><a href="http://mb5u.com">SpriteNav</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="http://mb5u.com">Messages</a></li> 
</ul> 
</body> 
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

银灰色三级CSS下拉菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些