導航條代碼 css下拉菜單
這是做出來的效果，以下是代碼：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜單製作</title><style>#head{ margin:0 auto;width:500px;padding:0px;background:#CC0;font-size:12px;display:block;height:30px;}#head ul{ list-style:none; margin:0px; padding:0px;}#head ul li{ float:left; position:relative; width:100px; height:30px;}#head ul li dl { width:100px;background: #C00; text-align:center;margin:0px; padding:0px; position:absolute;}#head ul li dl dt { width:100px; height:30px; line-height:30px; background: #960;}#head ul li dl a{ text-decoration:none; }#head ul li dl a:hover{ color:#F00}#head ul li dl dd{ display:none;}#head ul li:hover dl dd,#head ul li.sfhover dl dd{ display:block;margin:5px 0px 0px; height:20px; line-height:20px; background:#CC9; }.main{ clear:both;}</style><script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("head").getElementsByTagName("lI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script></head><body><div id="head"><ul> <li> <dl> <dt><a href="#">前列腺疾病 </a></dt> <dd><a href="#">急性前列腺炎</a></dd> <dd><a href="#">慢性前列腺炎</a></dd> <dd><a href="#">前列腺增生</a></dd> <dd><a href="#">前列腺炎</a></dd> </dl> </li> <li> <dl> <dt><a href="#">生殖感染 </a></dt> <dd><a href="#">睾丸炎</a></dd> <dd><a href="#">精囊炎</a></dd> <dd><a href="#">尿道炎</a></dd> <dd><a href="#">龜頭炎</a></dd> </dl> </li> <li> <dl> <dt><a href="#">生殖整形</a></dt> <dd><a href="#">包皮過長</a></dd> <dd><a href="#">包莖</a></dd> <dd><a href="#">陰莖增長</a></dd> <dd><a href="#">陰莖增粗</a></dd> </dl> </li> <li> <dl> <dt><a href="#">性傳播疾病 </a></dt> <dd><a href="#">陽痿</a></dd> <dd><a href="#">早泄</a></dd> <dd><a href="#">勃起障礙</a></dd> <dd><a href="#">射精障礙</a></dd> </dl> </li></ul></div><div class="main"><p>sdfsdfsfsafsadfsdafsadfsadfsdfsdfsdfsdfsdf</p></div></body></html>
推薦閱讀：
※原創//梅竹透明粒子模板2款+附代碼
※圖片羽化代碼
※幾個論壇簽名顯IP的代碼！很簡單，大家都可以用 - 綠色軟體下載 - JZ5U綠色下載站
※漂亮的多層花式邊框源代碼之一
※【顏色邊框】五款圖片顏色邊框的代碼