<html>
<head>
<title>
测试导航
</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#menu{
}
#menu li{
float: left;
list-style: none;
}
#menu li a{
text-decoration: none;
font-size: 15px;
font-weight: 700;
color: white;
display: block;
height: 40px;
line-height: 40px;
background: #E43c3e;
padding-left:15px;
padding-right:15px;
text-align: center;
}
#menu li a:hover{
background-color:A40000;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="">首页</a></li>
<li><a href="">服装城</a></li>
<li><a href="">京东超市</a></li>
<li><a href="">团购</a></li>
<li><a href="">夺宝岛</a></li>
<li><a href="">宅家好电视</a></li>
</ul>
</body>
</html>
注意如下几点:
1. 在li中float, 因为是li浮动的
2.将li中的a标签变成块状并设定高度, 里面字的高度等于a标签的高度
3. 虽然a会继承来自li中设定的属性, 但是部分属性无法继承, 所以最好的方式是完全自定义a的属性