码迷,mamicode.com
首页 > Web开发 > 详细

HTML+CSS导航之下拉菜单方法1——JS

时间:2016-06-09 15:56:47      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

代码:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>下拉菜单之JS</title>
 6   <style>
 7     * {
 8       margin: 0;
 9       padding: 0;
10       border: 0;
11     }
12     /*基本代码*/
13     #dropdown {
14       width: 648px;
15       height: 40px;
16       margin: 0 auto;
17     }
18     #dropdown ul {
19       list-style-type: none;
20     }
21     #dropdown ul li {
22       position: relative;
23       float: left;
24     }
25     #dropdown a {
26       display: block;
27       min-width: 108px;
28       text-align: center;
29       text-decoration: none;
30       line-height: 40px;
31       background-color: #eeeeee;
32       color: #000000;
33     }
34     #dropdown a:hover {
35       background-color: #666666;
36       color: #ffffff;
37     }
38     #dropdown ul li ul li {
39       float: none; /*不设置左浮动也就是垂直显示*/
40     }
41     /*以下是下拉菜单显示和隐藏的代码*/
42     #dropdown ul li ul { /*子菜单必须设定绝对定位,否则会占据空间导致内容移动*/
43       position: absolute; /*如果设置了left、top等属性,则父级要设置相对定位,如果不设置,则跟static的位置一样,会被父级为static或者relative顶下去,只是本身不占空间了*/
44       display: none;
45     }
46   </style>
47   <script>
48     function showsubmenu (li) {
49       var submenu = li.getElementsByTagName(ul); /*获取子菜单标签,下标从0开始*/
50       submenu[0].style.display = block;
51     }
52     function hidesubmenu(li) {
53       var submenu = li.getElementsByTagName(ul);
54       submenu[0].style.display = none;
55     }
56   </script>
57 </head>
58 <body>
59   <div id="dropdown">
60     <ul>
61       <li><a href="">首 页</a></li>
62       <li onmousemove="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">主菜单一</a>
63         <ul>
64           <li><a href="">子菜单一</a></li>
65           <li><a href="">子菜单二</a></li>
66           <li><a href="">子菜单三</a></li>
67         </ul>
68       </li>
69       <li onmousemove="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">主菜单二</a>
70         <ul>
71           <li><a href="">子菜单一</a></li>
72           <li><a href="">子菜单二</a></li>
73           <li><a href="">子菜单三</a></li>
74           <li><a href="">子菜单四</a></li>
75         </ul>
76       </li>
77       <li><a href="">主菜单三</a></li>
78       <li><a href="">主菜单四</a></li>
79       <li><a href="">主菜单五</a></li>
80     </ul>
81   </div>
82   <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
83 </body>
84 </html>

 

HTML+CSS导航之下拉菜单方法1——JS

标签:

原文地址:http://www.cnblogs.com/nonsec/p/5572399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!