1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>制作二级菜单</title>
6 <style type="text/css">
7 body {
8 margin: 0;
9 padding: 0;
10 font-family: Verdana,Arial,Helvetica,sans-serif;
11 font-size: 12px;
12 line-height: 1.5;
13 }
14
15 #menu ul {
16 margin: 0;
17 padding: 0;
18 list-style: none;
19 border: 1px solid #ccc;
20 width: 100px;
21 }
22
23 #menu ul li {
24 background-color: #eee;
25 height: 26px;
26 line-height: 26px;
27 border-bottom: 1px solid #ccc;
28 }
29
30 #menu ul li a {
31 color: #000;
32 text-decoration: none;
33 }
34
35 #menu ul li a:hover {
36 color: #ff0000;
37 }
38
39 #menu ul li ul {
40 display: none;
41 position: absolute;
42 left: 100px;
43 top: 0px;
44 }
45
46 #menu ul li.current ul {
47 display: block;
48 }
49 </style>
50 <script type="text/javascript">
51 startList = function () {
52 navRoot = document.getElementById("menu");
53 var allli = navRoot.getElementsByTagName("li");
54 for (i = 0; i < allli.length; i++) {
55 node = allli[i];
56 node.onmouseover = function () {
57 this.className += "current";
58 }
59 node.onmouseout = function () {
60 this.className = this.className.replace("current", "");
61 }
62 }
63 }
64 window.onload = startList;
65 </script>
66 </head>
67 <body>
68 <div id="menu">
69 <ul>
70 <li><a href="#">PS</a>
71 <ul>
72 <li class="current"><a href="#">二级菜单列表1</a></li>
73 <li class="current"><a href="#">二级菜单列表2</a></li>
74 </ul>
75 </li>
76 <li><a href="#">Jave</a>
77 <ul>
78 <li class="current"><a href="#">二级菜单列表5</a></li>
79 <li class="current"><a href="#">二级菜单列表6</a></li>
80 <li class="current"><a href="#">二级菜单列表7</a></li>
81 <li class="current"><a href="#">二级菜单列表8</a></li>
82 <li class="current"><a href="#">二级菜单列表8</a></li>
83 </ul>
84 </li>
85 <li><a href="#">php</a>
86 <ul>
87 <li class="current"><a href="#">二级菜单列表9</a></li>
88 <li class="current"><a href="#">二级菜单列表10</a></li>
89 <li class="current"><a href="#">二级菜单列表11</a></li>
90 <li class="current"><a href="#">二级菜单列表12</a></li>
91 </ul>
92 </li>
93 <li><a href="#">.net</a>
94 <ul>
95 <li class="current"><a href="#">二级菜单列表13</a></li>
96 <li class="current"><a href="#">二级菜单列表14</a></li>
97 <li class="current"><a href="#">二级菜单列表15</a></li>
98 <li class="current"><a href="#">二级菜单列表16</a></li>
99 <li class="current"><a href="#">二级菜单列表15</a></li>
100 <li class="current"><a href="#">二级菜单列表16</a></li>
101 </ul>
102 </li>
103 </ul>
104 </div>
105 </body>
106 </html>
