經典的藍色CSS下拉菜單_菜單導航特效

純CSS代碼實現比較經典的藍色風格下拉菜單，最多支持兩級，適用于各種企業網站，新聞資訊類網站，效果挺棒的，不是嗎？雖然沒有用到過多的修飾，但給你的感覺清新、大方、簡潔，符合現代網站的特點。

<html>
<title>經典的藍色CSS下拉菜單</title>
<style>
*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}  
#nav { line-height: 20px; list-style-type: none; margin-top:5px;} 
#nav a { display: block; width: 77px; text-align:center; font-size:12px;} 
#nav a:link  { color:#FFF; text-decoration:none;margin:0;} 
#nav a:visited  {color:#FFF;text-decoration:none;margin:0;}
#nav a:hover {color:#C00;text-decoration:none;}
#nav li {float: left;}
#nav li a:hover{background:#FFFFFF;} 
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;} 
#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;} 
#nav li ul a:link  {color:#0d5097; text-decoration:none;}  
#nav li ul a:visited  {color:#0d5097;text-decoration:none;}  
#nav li ul a:hover  {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#mrc {clear: left;}
</style>
<body>
<script type=text/javascript>
</script>
<div id=div_center>
<UL id=nav>
<LI style="MARGIN-LEFT: 10px"><A href="http://www.zhaotila.cn">主站索引</A></LI>
<LI><A href="#">新聞中心</A> 
<UL>
<LI><A href="#">·新聞中心1</A></LI>
<LI><A href="#">·新聞中心3</A></LI></UL></LI>
<LI><A href="#">企業簡介</A> 
<UL>
<LI><A href="#">·企業簡介</A></LI>
<LI><A href="#">·產品中心</A></LI>
<LI><A href="#">·服務專區</A></LI></UL></LI>
<LI><A href="#">文章中心</A> 
<UL>
<LI><A href="#">·文章中心</A></LI>
<LI><A href="#">·文章中心</A></LI></UL></LI>
<LI><A href="#">國際新聞</A> 
<UL>
<LI><A href="#">國際新聞</A></LI>
<LI><A href="#">國內新聞</A></LI>
<LI><A href="#">科技新聞</A></LI></UL></LI>
<LI><A href="#">圖片新聞</A> 
<UL>
<LI><A href="#">·圖片中心</A></LI>
<LI><A href="#">·圖片中心</A></LI></UL></LI>
<LI><A href="#">下載中心</A> 
<UL>
<LI><A href="#">·常用軟件</A></LI>
<LI><A href="#">·文檔下載</A></LI>
<LI><A href="#">社區論壇</A></LI></UL>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2012-11-14

[收藏][報錯][返回列表]

相關菜單導航特效：

經典的藍色CSS下拉菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些