导航条常见（ul 无序列表div）

<!--<div>-->
<!--<p><span>fsa</span></p>-->
<!--<div>-->
<!--<div></div>-->
<!--<p></p>-->
<!--</div>-->
<nav class="nav1">
<a href="#">新闻</a>
<a href="#">体育</a>
<a href="#">科技</a>
<a href="#">汽车</a>
<a href="#">谈论</a>
</nav>
<!--</div>-->

.nav1 a {
width: 50px;
height: 50px;
float: left;
margin: 50px;
background: pink;
text-align: center;
line-height: 50px ;
text-decoration: none;
color: salmon;
}
.nav1 a:hover {
background: red;
width: 50px ;
color: #003399;
/*cursor: pointer;*/
}

<ul class="ul1">
<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>

.ul1{
clear: both;
}
.ul1 li {
list-style-type: none;
float: left;
width: 100px;
height: 100px ;
text-align: center;

}
.ul1 li a{
text-decoration: none;
line-height: 100px ;
color: cornflowerblue;

}
.ul1 li:hover{
background: pink;
text-shadow: 1px 1px 1px black;
}

常见的两种方式

导航条常见（ul 无序列表div）

原文：http://www.cnblogs.com/ldcxj/p/5290114.html