html:
<body>
<ul>
<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>
CSS:
*{
margin: 0;
padding: 0;
}
body{
background: #ffffce;
}
ul{
width: 995px;
height: 36px;
background: #9c0000;
border-bottom: 21px solid #cecfce;
padding-left: 5px;
margin-top: 40px;
}
li{
width: 100px;
height: 32px;
background:#ffffff;
border-right: 1px solid #000000;
margin-right: 1px;
float: left;
list-style: none;
}
a{
display: block;
font-size: 14px;
height: 28px;
line-height: 28px;
background: #ff6100;
text-decoration: none;
margin-top: 4px;
color: #000000;
text-align: center;
}
li:hover{
background: #9c0000;
}
li:hover a{
background: #000;
color: yellow;
}