<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
</head>
<style>
#container{margin:0 auto; width:800px;}
#nav ul{list-style:none;}
#nav ul li{float:left;}
#nav li a{padding:7px 10px;}
#nav li a:link,#nav li a:visited{background-color:#191919; text-decoration:none;color:#FFF;}
#nav li a:hover{background-color:yellow;color:#999;}
</style>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</li>
<li><a href="#">上衣</li>
<li><a href="#">裤子</li>
<li><a href="#">鞋子</li>
<li><a href="#">帽子</li>
<li><a href="#">内衣</li>
</ul>
</div>
</body>
</html>
原文：http://www.cnblogs.com/tangtangsimida/p/7420988.html