三种简单网页导航栏样式

第一种

如图：

<div id="dhl">
  <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>
</div>

#dhl ul{
    width:200px;
}
#dhl ul li{
list-style-type:none;
background-color:#999;
}
#dhl ul li a{
text-decoration:none;
display:block;
color:#333;
padding:10px;
text-align:center;
border-left:15px solid red;
border-bottom:1px solid red;
border-right:1px solid red;
}
#dhl ul li a:hover{
color:red;
background-color:green;
}

第二种

如图：

<div id="dht">
  <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>
</div>

#dht ul{
width:1200px;
}
#dht ul li{
float:left;
list-style-type:none;
background-color:#666;
width:200px;
text-align:center;
}
#dht ul li a{
text-decoration:none;
display:block;
color:#999;
padding:10px;
}
#dht ul li a:hover{
color:red;
background-color:green;
}

第三种

如图：

<div id="dhn">
  <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>
</div>

#dhn{
padding-top:50px;
}
#dhn ul{
    width:200px;
}
#dhn ul li{
list-style-type:none;
}
#dhn ul li a{
text-decoration:none;
display:block;
color:#333;
padding:10px;
text-align:center;
border-bottom:1px dotted red;
}
#dhn ul li a:hover{
color:red;
background-color:green;
}