js 特效

 ?1 ???2 <style type="text/css"> ??3 * { ??4 padding:0; ??5 margin:0; ??6 } ??7 body { ??8 font-family:verdana, sans-serif; ??9 font-size:small; ?10 } ?11 #navigation, #navigation li ul { ?12 list-style-type:none; ?13 } ?14 #navigation { ?15 margin:20px; ?16 } ?17 #navigation li { ?18 float:left; ?19 text-align:center; ?20 position:relative; ?21 } ?22 #navigation li a:link, #navigation li a:visited { ?23 display:block; ?24 text-decoration:none; ?25 color:#000; ?26 width:120px; ?27 height:40px; ?28 line-height:40px; ?29 border:1px solid #fff; ?30 border-width:1px 1px 0 0; ?31 background:#c5dbf2; ?32 padding-left:10px; ?33 } ?34 #navigation li a:hover { ?35 color:#fff; ?36 background:#2687eb; ?37 } ?38 #navigation li ul li a:hover { ?39 color:#fff; ?40 background:#6b839c; ?41 } ?42 #navigation li ul { ?43 display:none; ?44 position:absolute; ?45 top:40px; ?46 left:0; ?47 margin-top:1px; ?48 width:120px; ?49 } ?50 #navigation li ul li ul { ?51 display:none; ?52 position:absolute; ?53 top:0px; ?54 left:130px; ?55 margin-top:0; ?56 margin-left:1px; ?57 width:120px; ?58 } ?59 </style> ?60 <script type="text/javascript"> ?61 function displaySubMenu(li) { ?62 var subMenu = li.getElementsByTagName("ul")[0]; ?63 subMenu.style.display = "block"; ?64 } ?65 function hideSubMenu(li) { ?66 var subMenu = li.getElementsByTagName("ul")[0]; ?67 subMenu.style.display = "none"; ?68 ?// e.getElementsByClassName("i").length 69 ??70 } ?71 </script> ?72 ???73 <ul id="navigation"> ?74 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> ?75 <a href="#">栏目1</a> ?76 <ul> ?77 <li><a href="#">栏目1->菜单1</a></li> ?78 <li><a href="#">栏目1->菜单2</a></li> ?79 <li><a href="#">栏目1->菜单3</a></li> ?80 <li><a href="#">栏目1->菜单4</a></li> ?81 </ul> ?82 </li> ?83 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> ?84 <a href="#">栏目2</a> ?85 <ul> ?86 <li><a href="#">栏目2->菜单1</a></li> ?87 <li><a href="#">栏目2->菜单2</a></li> ?88 <li><a href="#">栏目2->菜单3</a></li> ?89 <li><a href="#">栏目2->菜单4</a></li> ?90 <li><a href="#">栏目2->菜单5</a></li> ?91 </ul> ?92 </li> ?93 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> ?94 <a href="#">栏目3</a> ?95 <ul> ?96 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> ?97 <a href="#">栏目3->菜单1</a> ?98 <ul> ?99 <li><a href="#">菜单1->子菜单1</a></li> 100 <li><a href="#">菜单1->子菜单2</a></li> 101 <li><a href="#">菜单1->子菜单3</a></li> 102 <li><a href="#">菜单1->子菜单4</a></li> 103 </ul> 104 </li> 105 <li><a href="#">栏目3->菜单2</a></li> 106 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 107 <a href="#">栏目3->菜单3</a> 108 <ul> 109 <li><a href="#">菜单3->子菜单1</a></li> 110 <li><a href="#">菜单3->子菜单2</a></li> 111 <li><a href="#">菜单3->子菜单3</a></li> 112 </ul> 113 </li> 114 </ul> 115 </li> 116 </ul> 117 ??