DIV+CSS制作二级横向弹出菜单，略简单

没有使用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>

 

posted @ 2016-08-11 21:03  xingzhui  阅读(8693)  评论(0)  编辑  收藏  举报