二级菜单demo 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>HTML</title>
 6         <style>
 7             * {
 8                 padding: 0;
 9                 margin: 0;
10             }
11             #div1 {
12                 width: 40px;
13                 height: 40px;
14                 background-color: #f00;
15                 position: absolute;
16                 left: 20px;
17                 top: 20px;
18             }
19             #div2 {
20                 width: 100px;
21                 height: 100px;
22                 background-color: #00f;
23                 position: absolute;
24                 left: 120px;
25                 top: 20px;
26                 display: none;
27             }
28         </style>
29     </head>
30 
31     <body>
32         <div id="div1"></div>
33         <div id="div2"></div>
34         <script>
35             var div1 = document.getElementById("div1");
36             var div2 = document.querySelector("#div2");
37             var timer = null;
38             div1.onmouseover = div2.onmouseover = function() {
39                 clearTimeout(timer);
40                 div2.style.display = "block";
41             };
42             div1.onmouseout = div2.onmouseout = function() {
43                 timer = setTimeout(function() {
44                     div2.style.display = "none";
45 
46                 }, 500);
47             };
48             div2.onmouseover = function() {
49                 clearTimeout(timer);
50                 div2.style.display = "block";
51             };
52             div2.onmouseout = function() {
53                 timer = setTimeout(function() {
54                     div2.style.display = "none";
55                 }, 500);
56             };
57         </script>
58     </body>
59 </html>

 

posted on 2014-01-15 13:50  剑胆_琴心  阅读(144)  评论(0)  编辑  收藏  举报