[teemo][20161128][html+css]下拉菜单实现的一种方案

一号店实例效果展示：

成果展示：

简单demo例子说明

demo效果：

demo菜单弹出效果：

方案说明：

导航栏：用列表实现；

弹出栏：嵌套在导航栏的<li>标签中，初始display:none;，导航栏<li>处于hover状态是display:block；

重点设置：

1、由于弹出框位于<li>标签中，所以弹出栏弹出的时候，会把<li>标签的宽高都撑大，会把旁边的<li>顶到右边；

因此必须设置<li>标签的宽高属性；设置了宽高，<li>就不会被撑大；

2、另外就是，要实现重叠效果，就可能需要设置z-index属性；

demo代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试</title>
 6     <style>
 7         body, ul {
 8             border: 0;
 9             padding: 0;
10             margin: 0;
11             font: 12px Arial, Helvetica, sans-serif;
12             color: #333;
13         }
14 
15         .head {
16             width: 1200px;
17             height: 35px;
18             line-height: 35px;
19             background-color: #cccccc;
20         }
21 
22         .nav {
23             float: right;
24         }
25 
26         .nav li {
27             float: left;
28             width: 100px;
29             height: 35px;
30             list-style: none;
31             border: 1px solid #e6e6e6;
32         }
33 
34         .block {
35             width: 500px;
36             height: 500px;
37             background-color: yellow;
38             display: none;
39         }
40 
41         .nav > li:hover .block {
42             display: block;
43         }
44 
45         .body {
46             width: 1200px;
47             height: 400px;
48             background-color: blue;
49         }
50     </style>
51 </head>
52 <body>
53 <div class="head">
54     <ul class="nav">
55         <li>
56             <div>导航1</div>
57             <div class="block">
58             </div>
59         </li>
60         <li>
61             <div>导航1</div>
62             <div class="block">
63             </div>
64         </li>
65         <li>
66             <div>导航1</div>
67             <div class="block">
68             </div>
69         </li>
70         <li>
71             <div>导航1</div>
72             <div class="block">
73             </div>
74         </li>
75         <li>
76             <div>导航1</div>
77             <div class="block">
78             </div>
79         </li>
80     </ul>
81 </div>
82 <div class="body">
83 </div>
84 </body>
85 </html>

 

posted @ 2016-11-30 10:15  张庭岑  阅读(108)  评论(0)    收藏  举报