用CSS控制的橫向列表菜單
2015-06-30 17:56:36
閱讀：883
首頁 資訊 技術分享
<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>
穩定
產品高可用性高并發貼心
項目群及時溝通專業
產品經理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質開發