1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>用javascript下拉式菜单</title>
6
7 <style type="text/css">
8 *{
9 padding: 0;
10 margin: 0;
11
12 }
13 body{
14 font-family: cursive;
15 font-size: 14px;
16 background-color:#000 ;
17
18 }
19 #navigation ,#navigation li ul{
20 list-style-type: none;
21 }
22 #navigation li{
23 float: left;
24 text-align: center;
25 position: relative;
26 }
27
28 #navigation li a:link,#navigation li a:visited{
29 text-decoration: none;
30 color: #fff;
31 width: 82px;
32 height: 40px;
33 line-height: 40px;
34 border: 1px solid #fff;
35 border-width:1px 1px 0 0 ;
36 background: #255f9e;
37 padding-left: 10px;
38 }
39 #navigation li a:hover{
40 color: #fff;
41 background: #ffb100;
42 }
43 #navigation li ul li a:hover{
44 color: #fff;
45 background: #ffb100;
46 }
47 #navigation li ul{
48 display: none;
49 position: absolute;
50 top: 40px;
51 margin-top: 1px;
52 font-size: 12px;
53 color: violet;
54 }
55 </style>
56
57 </head>
58 <body>
59 <ul id="navigation">
60 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
61 <a href="">小动物</a>
62 <ul>
63 <li>小猫</li>
64 <li>小狗</li>
65 <li>小猪</li>
66 <li>小强</li>
67 </ul>
68 </li>
69 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
70 <a href="">水果</a>
71 <ul>
72 <li>香蕉</li>
73 <li>苹果</li>
74 <li>葡萄</li>
75 <li>橘子</li>
76 <li>梨</li>
77 </ul>
78
79
80 </li>
81 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
82 <a href="">蔬菜</a>
83 <ul>
84 <li>大白菜</li>
85 <li>芹菜</li>
86 <li>花菜</li>
87 <li>茄子</li>
88 </ul>
89 </li>
90 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
91 <a href="">小零食</a>
92 <ul>
93 <li>大刀肉</li>
94 <li>小鲤鱼</li>
95 <li>臭干子</li>
96 </ul>
97 </li>
98 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
99 <a href="">你想去哪</a>
100 <ul>
101 <li>不知道</li>
102 <li>想知道</li>
103 <li>不知哦</li>
104 <li>苹果哦</li>
105 </ul>
106 </li>
107 </ul>
108 <script type="text/javascript">
109 //自定义函数displaySubMenu(li),用于在鼠标指向主菜单时显示菜单项
110 function displaySubMenu(li){
111 var subMenu=li.getElementsByTagName("ul")[0];
112 subMenu.style.display="block";
113
114
115 }
116 //自定义函数hidesubmenu(li),用于在鼠标移开时
117 function hideSubMenu(li){
118 var subMenu=li.getElementsByTagName("ul")[0];
119 subMenu.style.display="none";
120 }
121 </script>
122
123 </body>
124 </html>
原文地址：https://www.cnblogs.com/yuanxiangguang/p/8973887.html
时间： 2024-08-08 22:30:58