<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding:0px;
margin:0px;
font-size: 14px;
}
ul{
height: 31px;
padding-top: 60px;
list-style: none;
border-bottom: 5px solid brown;
}
li{
}
a{
text-decoration: none;
text-align: center;
display:block;
width: 120px;
height: 30px;
line-height: 30px;
background-color:darkgray;
color:white;
float: left;
}
.on,a:hover{
color:aqua;
background-color: #FF6600;
height: 40px;
margin-top: -10px;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li><a class="on" href="#">首页</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
</ul>
</body>
</html>