經(jīng)典的藍(lán)色CSS下拉菜單

2024-09-05 12:20:32

字體：大中小

供稿：網(wǎng)友

純CSS代碼實(shí)現(xiàn)比較經(jīng)典的藍(lán)色風(fēng)格下拉菜單，最多支持兩級(jí)，適用于各種企業(yè)網(wǎng)站，新聞資訊類網(wǎng)站，效果挺棒的，不是嗎？雖然沒(méi)有用到過(guò)多的修飾，但給你的感覺(jué)清新、大方、簡(jiǎn)潔，符合現(xiàn)代網(wǎng)站的特點(diǎn)。

<html><title>經(jīng)典的藍(lán)色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;}#content {clear: left;}</style><body><script type=text/javascript></script><div   class="iwvjtn8m0"   id=div_center><UL id=nav><LI style="MARGIN-LEFT: 10px">主站索引</LI><LI>新聞中心 <UL><LI>·新聞中心1</LI><LI>·新聞中心3</LI></UL></LI><LI>企業(yè)簡(jiǎn)介 <UL><LI>·企業(yè)簡(jiǎn)介</LI><LI>·產(chǎn)品中心</LI><LI>·服務(wù)專區(qū)</LI></UL></LI><LI>文章中心 <UL><LI>·文章中心</LI><LI>·文章中心</LI></UL></LI><LI>國(guó)際新聞 <UL><LI>國(guó)際新聞</LI><LI>國(guó)內(nèi)新聞</LI><LI>科技新聞</LI></UL></LI><LI>圖片新聞 <UL><LI>·圖片中心</LI><LI>·圖片中心</LI></UL></LI><LI>下載中心 <UL><LI>·常用軟件</LI><LI>·文檔下載</LI><LI>社區(qū)論壇</LI></UL></div></body></html>

上一篇：純CSS下拉菜單，Aspku.com整理

下一篇：類似Windows風(fēng)格的導(dǎo)航菜單，CSS+JavaScript實(shí)現(xiàn)