html+css 圆角导航栏菜单

html部分：

   

 
• 主页

 
• 产品

 
• 资讯

 
• 下载

 
• 论坛

 
• 联系我们

  

css部分：

/* CSS Document */
*{
  margin:0;
  padding:0;
  font-size:14px;
}
ul{
  list-style:none;
  height:50px;
  border-bottom:#f60 solid 5px;
  padding-left:20px;
}

.nav li{
  float:left;
  margin-top:20px;
 
}
.nav li a{
  color:#333;
  text-decoration:none;
  display:block;     //将a变为块级元素
  
  height:30px;
  line-height:30px;
  width:120px;
  background-color:#ccc;
  margin-bottom:10px;
  text-align:center;
  background:url(http://img.mukewang.com/53846438000168f901200060.jpg);
  
}
.nav li a.on, .nav li a:hover{
  
  color:#fff;
  background-position:0 -30px;
}