css導航菜單

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及以上支持