<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圆角导航</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#" class="cur"><span>首页</span></a></li>
<li><a href="#"><span>首页首页</span></a></li>
<li><a href="#"><span>首页首</span></a></li>
<li><a href="#"><span>首页首页</span></a></li>
<li><a href="#"><span>首页首页</span></a></li>
<li><a href="#"><span>首页首页</span></a></li>
<li><a href="#"><span>首页首页</span></a></li>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>首页首页首页</span></a></li>
</ul>
</div>
</body>
</html>
/*基本设置*/
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.clear{ clear:both;}
table{border-collapse:collapse;}
td{border:#000 solid 1px;}
.menu {
height:38px;
990px;
background:url(../images/nh06.jpg) no-repeat;
margin:30px auto
}
.menu ul li {
float:left;
padding:0 6px;
display:inline;
background:url(../images/list.png) no-repeat right;
}
.menu a {
display:block;
float:left;
height:31px;
margin-top:7px;
color:#fff;
padding-left:14px;
font-weight:bold
}
.menu a:hover,.menu .cur {
background:url(../images/nav-left_y.jpg) no-repeat left;
color:#1E8904;
}
.menu span{
display:block;
float:left;
height:27px;
padding-top:4px;
padding-right:14px;
}
.menu a:hover span,.cur span{
background:url(../images/nav_right_y.png) no-repeat right;
}