用JavaScript+css制作下拉式菜单

  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>
用JavaScript+css制作下拉式菜单

猜你喜欢
