首页 > 代码库 > JavaScript下拉菜单

JavaScript下拉菜单

2024-07-23 16:11:35   228人阅读

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

JavaScript下拉菜单


联系
我们