- 点击向下展开的下拉菜单特效代码，无调用jQuery，真正的JS下拉菜单，兼容性方面未做测试，觉得有用处的自己测试修正吧，本文仅提供基础的代码供参考。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>下拉菜单</title> 6 <style type="text/css"> 7 *{margin:0; padding:0} 8 #nav{width:200px; margin:50px} 9 #nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff} 10 #nav a{display:block; line-height:24px;color:#666666} 11 #nav a:hover{background-color:#eee; color:#000;} 12 #nav div{display:none; border:1px solid #000; border-top:none} 13 </style> 14 <script type="text/javascript"> 15 function $(id){return document.getElementById(id)} 16 window.onload = function(){ 17 $("nav").onclick = function(e){ 18 var src = e?e.target:event.srcElement; 19 if(src.tagName == "H3"){ 20 var next = src.nextElementSibling || src.nextSibling; 21 next.style.display = (next.style.display =="block")?"none":"block"; 22 } 23 } 24 } 25 </script> 26 </head> 27 28 <body> 29 <div id="nav"> 30 <h3>管理区</h3> 31 <div> 32 <a href="#">建议</a> 33 <a href="#">链接</a> 34 <a href="#">联系</a> 35 </div> 36 <h3>交流区</h3> 37 <div> 38 <a href="#">JavaScript</a> 39 <a href="#">Delphi</a> 40 <a href="#">VC++</a> 41 </div> 42 </div> 43 </body> 44 </html>