 这是做出来的效果，以下是代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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> |
|
|
