首页 > 代码库 > js之原生下拉菜单

js之原生下拉菜单

2024-11-02 06:09:01   209人阅读

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>js之下拉菜单</title>
 6         <style type="text/css">
 7             *{margin:0;padding:0;}
 8             ul{list-style:none;}
 9             #nav{width:500px;height:30px;background:lightseagreen;}
10             #nav li{width:100px;float:left;}
11             #nav li a{display:block;width:100px;height:30px;line-height:30px;color:#000;text-decoration:none;text-align:center;}
12             .sub{display:none;}
13             .sub li{width:100px;text-align:center;padding:5px 0;}
14         </style>
15         <script type="text/javascript">
16              window.onload=function(){
17                  var divs=document.getElementById("nav");
18                  var lis=divs.getElementsByClassName("dropdown");
19                  //console.log(lis);
20                  
21               for(i=0;i<lis.length;i++){
22                   var index=lis[i];
23                   index.onmouseover=function(){
24                       this.getElementsByTagName("ul")[0].style.display="block";
25                   }
26                   
27                   index.onmouseout=function(){
28                       this.getElementsByTagName("ul")[0].style.display="none";
29                   }
30               }
31                  
32                      
33              }
34         </script>
35     </head>
36     <body>
37         <ul id="nav">
38             <li><a href="#">首页</a></li>
39             <li class="dropdown"><a href="#">学校简介</a>
40                 <ul class="sub">
41                     <li>研究生</li>
42                     <li>本科招生</li>
43                     <li>继续教育</li>
44                 </ul>
45             </li>
46             <li><a href="#">师资队伍</a></li>
47             <li class="dropdown"><a href="#"><span>招生就业</span><i></i></a>
48                 <ul class="sub">
49                     <li>研究生</li>
50                     <li>本科招生</li>
51                     <li>继续教育</li>
52                 </ul>
53             </li>
54             <li><a href="#">学术研究</a></li>
55         </ul>
56     </body>
57 </html>

效果：

技术分享

 

js之原生下拉菜单


联系
我们