zoukankan      html  css  js  c++  java

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

     
      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.              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.              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> 
  • 相关阅读:
    tcpdump高级过滤
    Flask简单学习
    nginx+keepalived高可用web负载均衡
    Golang基础(5)：Go语言反射规则
    Golang基础(4)：Go结构体
    分布式SESSION一致性
    JSON WEB TOKEN (JWT)
    Table布局
    GRID布局
    三种方式实现轮播图功能
  • 原文地址：https://www.cnblogs.com/fengyv/p/3788755.html
Copyright © 2011-2022 走看看