1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>用javascript下拉式菜单</title> 6 7 <style type="text/css"> 8 *{ 9 padding: 0; 10 margin: 0; 11 12 } 13 body{ 14 font-family: cursive; 15 font-size: 14px; 16 background-color:#000 ; 17 18 } 19 #navigation ,#navigation li ul{ 20 list-style-type: none; 21 } 22 #navigation li{ 23 float: left; 24 text-align: center; 25 position: relative; 26 } 27 28 #navigation li a:link,#navigation li a:visited{ 29 text-decoration: none; 30 color: #fff; 31 width: 82px; 32 height: 40px; 33 line-height: 40px; 34 border: 1px solid #fff; 35 border-width:1px 1px 0 0 ; 36 background: #255f9e; 37 padding-left: 10px; 38 } 39 #navigation li a:hover{ 40 color: #fff; 41 background: #ffb100; 42 } 43 #navigation li ul li a:hover{ 44 color: #fff; 45 background: #ffb100; 46 } 47 #navigation li ul{ 48 display: none; 49 position: absolute; 50 top: 40px; 51 margin-top: 1px; 52 font-size: 12px; 53 color: violet; 54 } 55 </style> 56 57 </head> 58 <body> 59 <ul id="navigation"> 60 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 61 <a href="">小动物</a> 62 <ul> 63 <li>小猫</li> 64 <li>小狗</li> 65 <li>小猪</li> 66 <li>小强</li> 67 </ul> 68 </li> 69 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 70 <a href="">水果</a> 71 <ul> 72 <li>香蕉</li> 73 <li>苹果</li> 74 <li>葡萄</li> 75 <li>橘子</li> 76 <li>梨</li> 77 </ul> 78 79 80 </li> 81 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 82 <a href="">蔬菜</a> 83 <ul> 84 <li>大白菜</li> 85 <li>芹菜</li> 86 <li>花菜</li> 87 <li>茄子</li> 88 </ul> 89 </li> 90 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 91 <a href="">小零食</a> 92 <ul> 93 <li>大刀肉</li> 94 <li>小鲤鱼</li> 95 <li>臭干子</li> 96 </ul> 97 </li> 98 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 99 <a href="">你想去哪</a> 100 <ul> 101 <li>不知道</li> 102 <li>想知道</li> 103 <li>不知哦</li> 104 <li>苹果哦</li> 105 </ul> 106 </li> 107 </ul> 108 <script type="text/javascript"> 109 //自定义函数displaySubMenu(li),用于在鼠标指向主菜单时显示菜单项 110 function displaySubMenu(li){ 111 var subMenu=li.getElementsByTagName("ul")[0]; 112 subMenu.style.display="block"; 113 114 115 } 116 //自定义函数hidesubmenu(li),用于在鼠标移开时 117 function hideSubMenu(li){ 118 var subMenu=li.getElementsByTagName("ul")[0]; 119 subMenu.style.display="none"; 120 } 121 </script> 122 123 </body> 124 </html>