教你DIV+CSS制作另一导航条效果

sunhw0725

　CSS部分：
<style>
*{
margin: 0;
padding: 0;
}
#nav{
width: 250px;
font-size: 12px;
background: #f60;
}
#nav ul{
display: block;
list-style-type: none;
}
#nav li{
display: block;
}
#nav li a{
padding: 0 0 0 10px;
width: 200px;
display: block;
color: #666;
text-decoration: none;
}
#nav li a:link,#nav li a:visited{
color: #666;
}
#nav li a:hover{
padding: 0 0 0 8px;
border-left: 2px solid #FF0000;
color: #cccc00;
}
</style>
结构部分：
<div id="nav">
<ul>
<li><a href="http://www.tzlink.com">网站首页</a></li>
  <li><a href="http://www.tzlink.com">台州Link</a></li>
  <li><a href="http://www.tzlink.com">网页设计</a></li>
  <li><a href="http://www.tzlink.com">网站欣赏</a></li>  
  <li><a href="http://www.tzlink.com">台州Link学习乐园</a></li>
  <li><a href="http://www.tzlink.com">台州Link欢迎您</a></li>
</ul>
</div>