1. 程式人生 > >CSS控制的橫向列表選單

CSS控制的橫向列表選單

<style type="text/css">
.test ul{list-style:none;} 
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;} 
.test a{display:block;text-align:center;height:30px;} 
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;} 
.test a:visited{color:#666;text-decoration:underline;} 
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}  
</style>
 
<div class="test"> 
<ul> 
<li><a href="1">首頁</a></li> 
<li><a href="2">產品介紹</a></li> 
<li><a href="3">服務介紹</a></li> 
<li><a href="4">技術支援</a></li> 
<li><a href="5">立刻購買</a></li> 
<li><a href="6">聯絡我們</a></li> 
</ul> 
</div>