• 欄目1
  • 欄目1->菜單1
  • 欄目1->菜單2
  • 欄目1->菜單3
  • 欄目1->菜單4
• 欄目2
  • 欄目2->菜單1
  • 欄目2->菜單2
  • 欄目2->菜單3
  • 欄目2->菜單4
  • 欄目2->菜單5
• 欄目3
  • 欄目3->菜單1
    • 菜單1->子菜單1
    • 菜單1->子菜單2
    • 菜單1->子菜單3
    • 菜單1->子菜單4
  • 欄目3->菜單2
  • 欄目3->菜單3
    • 菜單3->子菜單1
    • 菜單3->子菜單2
    • 菜單3->子菜單3

下拉菜單

 1 <script type="text/javascript"> 
 2 function displaySubMenu(li) { 
 3 var subMenu = li.getElementsByTagName("ul")[0]; 
 4 subMenu.style.display = "block"; 
 5 } 
 6 function hideSubMenu(li) { 
 7 var subMenu = li.getElementsByTagName("ul")[0]; 
 8 subMenu.style.display = "
 
none"; 
 9  // e.getElementsByClassName("i").length
10  
11 } 
12 </script> 
13   

  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   

js 特效