很漂亮的CSS水平下拉菜单，有个性

最新推荐文章于 2021-05-31 14:35:06 发布
xingzhui89
最新推荐文章于 2021-05-31 14:35:06 发布
阅读量1k
点赞数
文章标签： css html 水平菜单
<!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"> 
<!-- 
@import"dhtml-horiz.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> 
<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</h1> 
<hr /> 
<ul id="navmenu"> 
<li><a href="#">Blog</a></li> 
<li><a href="#">Work +</a> 
<ul> 
<li><a href="#">Websites +</a> 
<ul> 
<li><a href="#">qrayg</a></li> 
<li><a href="#">qArcade</a></li> 
<li><a href="#">qLoM</a></li> 
<li><a href="#">qDT</a></li> 
</ul> 
</li> 
<li><a href="#">Pen and Ink</a></li> 
<li><a href="#">Free Interfaces</a></li> 
</ul> 
</li> 
<li><a href="#">Learn +</a> 
<ul> 
<li><a href="#">Fireworks +</a> 
<ul> 
<li><a href="#">aquaButton</a></li> 
<li><a href="#">aquaButton2</a></li> 
<li><a href="#">waterDrop</a></li> 
<li><a href="#">lightFX</a></li> 
<li><a href="#">lightFX2</a></li> 
</ul> 
</li> 
<li><a href="#">CSS +</a> 
<ul> 
<li><a href="#">footerStick</a></li> 
<li><a href="#">spriteNav</a></li> 
<li><a href="#">@import</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">Info</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</body> 
</html>