没有使用JavaScript控制二级菜单的显示，结果如上图所示。
代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>纯DIV+CSS制作二级横向弹出菜单</title>
6 <style type="text/css">
7 .menu{
8 font-family:arial,sans-serif;
9 /*width:750px;这里的宽度设置并不是必须的*/
10 padding:0;
11 margin:50px;
12 }
13 .menu ul{
14 padding:0;
15 margin:0;
16 /*ul和ol、li都有list-style-type属性，*/
17 list-style-type:none;
18 }
19 .menu ul li{
20 /*float属性定义元素在哪个方向浮动，浮动元素会生成一个块级框。如果浮动非替换元素，则要
21 指明一个明确的宽度，否则会被尽可能的压缩。*/
22 float:left;
23 position:relative;
24 list-style-type:none;
25 }
26 .menu ul li a, .menu ul li a:visited{
27 /*display的值，none表示不被显示；block表示显示为块级元素，元素前后
28 有换行符；inline为默认值，内联元素，前后没有换行符……*/
29 display:block;
30 text-align:center;
31 text-decoration:none;
32 width:104px;
33 height:30px;
34 color:#000;
35 border-width:1px solid #fff;
36 background:#c9c9a7;
37 line-height:30px;
38 font-size:11px;
39 }
40 /*鼠标无动作时不显示*/
41 .menu ul li ul{
42 display:none;
43 }
44 /*当鼠标指向第一级li时，第二级ul的动作*/
45 .menu ul li:hover ul{
46 display:block;
47 position:absolute;
48 top:30px;
49 left:0;
50 width:105px;
51 }
52 .menu ul li:hover ul li a{
53 display:block;
54 background:#faeec7;
55 color:#000;
56 }
57 .menu ul li:hover ul li a:hover{
58 background:#dfc184;
59 color:#000;
60 }
61 /*clear属性定义了元素的哪边上不允许出现浮动元素。*/
62 .clear{
63 clear:both;
64 }
65 </style>
66
67 </head>
68 <body>
69 <div class="menu">
70 <ul>
71 <li><a class="hide" href="#">一级菜单</a>
72 <ul>
73 <li><a href="#">二级菜单</a></li>
74 <li><a href="#">二级菜单</a></li>
75 <li><a href="#">二级菜单</a></li>
76 </ul>
77 </li>
78 <li><a class="hide" href="#">一级菜单</a>
79 <ul>
80 <li><a href="#">二级菜单</a></li>
81 <li><a href="#">二级菜单</a></li>
82 <li><a href="#">二级菜单</a></li>
83 </ul>
84 </li>
85 <li><a class="hide" href="#">一级菜单</a>
86 <ul>
87 <li><a href="#">二级菜单</a></li>
88 <li><a href="#">二级菜单</a></li>
89 <li><a href="#">二级菜单</a></li>
90 </ul>
91 </li>
92 <li><a class="hide" href="#">一级菜单</a></li>
93 <div class="clear"></div>
94 </ul>
95
96 </div>
97
98 </body>
99 </html>
时间： 2024-10-20 11:11:02