fengyv

http://www.cnblogs.com/fengyv

导航

Javascript实现简单的下拉二级菜单

Posted on 2014-06-14 21:55  fengyv  阅读(296)  评论(0)  编辑  收藏  举报
 
    1. <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <meta http-equiv="content-type" content="texthtml;charset=utf-8">  
    5.     <title>Menu</title>  
    6.     <style type="text/css">  
    7.         #nav  
    8.         {  
    9.             list-style: none;  
    10.             text-align: center;  
    11.         }  
    12.         #nav li  
    13.         {  
    14.             float: left;  
    15.             width: 100px;  
    16.             color: white;  
    17.             background-color: #3E3E3E;  
    18.         }  
    19.         #menu  
    20.         {  
    21.             list-style: none;  
    22.             padding: 5px;  
    23.             display: none;  
    24.             margin-left: -5px;  
    25.             margin-top: -5px;  
    26.         }  
    27.         #menu li  
    28.         {  
    29.             background-color: #ccc;  
    30.             width: 100px;  
    31.             text-align: left;  
    32.             padding-left: 10px;  
    33.         }  
    34.         #menu li a:link  
    35.         {  
    36.             text-decoration: none;  
    37.             display: block;  
    38.         }  
    39.         #menu li a:hover  
    40.         {  
    41.             background-color:#3E3E3E;  
    42.             color: white  
    43.         }  
    44.     </style>  
    45. </head>  
    46. <body>  
    47.     <ul id="nav">  
    48.         <li class="child">数 据 库  
    49.             <ul id="menu">  
    50.                 <li><a href="http://blog.csdn.net/u011043843">MySQL</a></li>  
    51.                 <li><a href="http://blog.csdn.net/u011043843">SQL Server</a></li>  
    52.                 <li><a href="http://blog.csdn.net/u011043843">Oracle</a></li>  
    53.                 <li><a href="http://blog.csdn.net/u011043843">DB2</a></li>  
    54.             </ul>  
    55.         </li>  
    56.         <li class="child">前台脚本  
    57.             <ul id="menu">  
    58.                 <li><a href="http://blog.csdn.net/u011043843">JavaScript</a></li>  
    59.                 <li><a href="http://blog.csdn.net/u011043843">Ruby</a></li>  
    60.                 <li><a href="http://blog.csdn.net/u011043843">HTML</a></li>  
    61.                 <li><a href="http://blog.csdn.net/u011043843">Python</a></li>  
    62.             </ul>  
    63.         </li>  
    64.         <li class="child">后台脚本  
    65.             <ul id="menu">  
    66.                 <li><a href="http://blog.csdn.net/u011043843">PHP</a></li>  
    67.                 <li><a href="http://blog.csdn.net/u011043843">ASP</a></li>  
    68.                 <li><a href="http://blog.csdn.net/u011043843">ASP.NET</a></li>  
    69.                 <li><a href="http://blog.csdn.net/u011043843">JSP</a></li>  
    70.             </ul>  
    71.         </li>  
    72.     </ul>  
    73.     <script type="text/javascript">  
    74.         var lis = document.getElementById("nav").getElementsByTagName('li');  
    75.         var i = 0;  
    76.           
    77.         for( i = 0; i < lis.length; i++)  
    78.         {  
    79.             if(lis[i].className == "child")  
    80.             {  
    81.                 lis[i].onmouseover = function()  
    82.                 {  
    83.                     var ulObj1 = this.getElementsByTagName('ul')[0];  
    84.                     ulObj1.style.display = "block";  
    85.                     this.style.backgroundColor="#ccc";  
    86.                     this.style.color="black";  
    87.                 }  
    88.             }  
    89.   
    90.                 lis[i].onmouseout = function()  
    91.                 {  
    92.                     var ulObj1 = this.getElementsByTagName('ul')[0]; //this是HTMLElement对象  
    93.                     ulObj1.style.display = "none";  
    94.                     this.style.backgroundColor="#3E3E3E";  
    95.                     this.style.color="white";  
    96.                 }  
    97.         }  
    98.   
    99.     </script>  
    100. </body>  
    101. </html></span>