1.纯css下拉菜单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css下拉菜单</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#header{
background-color:#eee;
height:50px;
margin-top:50px;
}
#nav > li{
list-style:none;
float:left;
margin: 0px 10px;
padding:10px;
width:100px;
}
#nav> li:hover ul {
display:block;
}
#nav > li:hover{
background-color:#808080;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul{
display:none;
}
#nav li ul li{
list-style:none;
margin:10px 0 0 0;
}
#nav li ul li a{
display:block;
padding:5px 10px;
color:#A2E200;
text-decoration:none;
}
#nav li ul li:hover a{
background-color:#606060;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span {
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="header">
<ul id="nav">
<li><span>Menu 1</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
</ul>
</li>
<li><span>Menu 3</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 1</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2.纯css绿色菜单,无图片
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css sprite</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
text-decoration:underline;
}
ul{
list-style:none;
}
#nav{
margin-top:50px;
}
#nav ul {
border-bottom:2px solid #70b133;
height:33px;
padding-left:200px;
}
#nav ul li{
float:left;
display:block;
background:#fff;
height:33px;
line-height:33px;
margin-top:-1px;
padding-left:20px;
padding-right:20px;
border-top:1px solid #70b133;
border-left:1px solid #70b133;
border-right:1px solid #70b133;
border-top-right-radius:5px;
border-top-left-radius:5px;
}
#nav ul li:hover{
float:left;
display:block;
background:#70b133;
height:33px;
line-height:33px;
padding-left:20px;
padding-right:20px;
border:1px solid #70b133;
}
#nav ul li.current{
float:left;
display:block;
background:#70b133;
height:33px;
line-height:33px;
padding-left:20px;
padding-right:20px;
border:1px solid #70b133;
}
#nav ul li:hover a{
color:#fff;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#">CSS模板</a></li>
<li><a href="#">后台模板</a></li>
<li><a href="#">图标图片</a></li>
<li><a href="#">CSS代码</a></li>
<li><a href="#">CSS图表</a></li>
<li><a href="#">CSS菜单</a></li>
</ul>
</div>
</body>
</html>
3.css和js菜单,兼容ie6
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css sprite</title>
<style type="text/css">
body{
font:normal 11px verdana;
}
ul{
margin:0;
padding:0;
list-style:none;
width:150px;
border-bottom:1px solid #ccc;
}
ul li{
position:relative;
}
li ul{
position:absolute;
left:149px;
top:0;
display:none;
}
ul li a{
display:block;
text-decoration:none;
color:#777;
background:#fff;/*IE6 Bug*/
padding:5px;
border: 1px solid #ccc;
border-bottom:0;
}
/*ie6下的bug*/
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover > ul, li.over > ul{
display:block;
}
</style>
<script type="text/javascript">
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.οnmοuseοver=function() {
this.className+=" over";
}
node.οnmοuseοut=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.οnlοad=startList;
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
总结: li:hover ie6不支持 ie7及以上支持