用JavaScript+css制作下拉式菜单

时间：2021-09-08 17:25:56
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>用javascript下拉式菜单</title>

     <style type="text/css">

         *{

             padding: 0;

             margin: 0;

         }

         body{

             font-family: cursive;

             font-size: 14px;

             background-color:#000 ;

         }

         #navigation ,#navigation li ul{

             list-style-type: none;

         }

         #navigation li{

             float: left;

             text-align: center;

             position: relative;

         }

         #navigation li a:link,#navigation li a:visited{

             text-decoration: none;

             color: #fff;

             width: 82px;

             height: 40px;

             line-height: 40px;

             border: 1px solid #fff;

             border-width:1px 1px 0 0 ;

             background: #255f9e;

             padding-left: 10px;

         }

         #navigation li a:hover{

             color: #fff;

             background: #ffb100;

         }

         #navigation li ul li a:hover{

             color: #fff;

             background: #ffb100;

         }

         #navigation li ul{

             display: none;

             position: absolute;

             top: 40px;

             margin-top: 1px;

             font-size: 12px;

             color: violet;

         }

     </style>

 </head>

 <body>

 <ul id="navigation">

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">小动物</a>

         <ul>

             <li>小猫</li>

             <li>小狗</li>

             <li>小猪</li>

             <li>小强</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">水果</a>

         <ul>

             <li>香蕉</li>

             <li>苹果</li>

             <li>葡萄</li>

             <li>橘子</li>

             <li>梨</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">蔬菜</a>

         <ul>

             <li>大白菜</li>

             <li>芹菜</li>

             <li>花菜</li>

             <li>茄子</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">小零食</a>

         <ul>

             <li>大刀肉</li>

             <li>小鲤鱼</li>

             <li>臭干子</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">你想去哪</a>

         <ul>

             <li>不知道</li>

             <li>想知道</li>

             <li>不知哦</li>

             <li>苹果哦</li>

         </ul>

     </li>

 </ul>

 <script type="text/javascript">

     //自定义函数displaySubMenu(li),用于在鼠标指向主菜单时显示菜单项

     function displaySubMenu(li){

         var subMenu=li.getElementsByTagName("ul")[0];

         subMenu.style.display="block";

     }

     //自定义函数hidesubmenu(li),用于在鼠标移开时

     function hideSubMenu(li){

         var subMenu=li.getElementsByTagName("ul")[0];

         subMenu.style.display="none";

     }

 </script>

 </body>

 </html>

相关文章