1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>菜单栏</title>
5 <script src="jquery/jquery-2.1.1.js"></script>
6 <script>
7 $(document).ready(function () {
8 $(".nav li").hover(function () {
9 // $(this).children(".jnNav").show(); //鼠标在LI上面，二级目录显示
10 if ($(this).children(".jnNav").is(":animated")) { $(this).children(".jnNav").stop(true); }
11 // if ($(".nav li").children(".jnNav").is(":animated")) { $(".nav li").children(".jnNav").stop(true,true);}
12 $(this).children(".jnNav").slideDown("fast"); //鼠标在LI上面，二级目录显示下滑效果
13 }, function () {
14 $(this).children(".jnNav").slideUp("fast"); //鼠标离开LI上面，二级目录隐藏上拉效果
15 // $(this).children(".jnNav").hide(); //鼠标离开LI上面，二级目录隐藏
16 })
17
18 })
19
20 </script>
21 <style type="text/css">
22 .mainNav {
23 position: absolute; /*定义主导航条位置*/
24 top: 0;
25 left: 0;
26 height: 37px;
27 line-height: 37px; /*设置行高 ， 使内部内容垂直中间显示*/
28 width: 990px;
29 z-index: 100; /*设置叠放层次100，防止其他层覆盖*/
30 background-color: #4A4A4A;
31 }
32
33 .nav { /*设置无序列表ul显示为内联样式inline,向左浮动*/
34 margin: 0px 0px 0px 25px;
35 display: inline;
36 float: left;
37 }
38
39 .nav li { /*设置向左浮动 ，这样li元素全部会在一行，显示同样设置为内联样式*/
40 float: left;
41 display: inline;
42 margin-right: 14px;
43 position: relative; /*使jnNav相对于LI 偏移*/
44 z-index: 100; /*防止其他层覆盖*/
45 }
46
47 .nav li a { /*显示为块，方便控制a的大小，鼠标在整个块级元素内均能选中，这里定义所有的A，可以设置ID具体定义*/
48 display: block;
49 padding: 0px 8px;
50 font-weight: 700;
51 color: #fff;
52 font-size: 14px;
53 text-decoration: none; /*去除文字下划线*/
54 }
55
56 .nav li a:hover { /*鼠标滑动设置背景色 ，这里定义所有的A，可以设置ID具体定义*/
57 background: #ffd800;
58 }
59
60 /* 二级菜单*/
61 .jnNav {
62 background-color: #fff; /*设置每个二级菜单，背景色为白色*/
63 border: 1px solid #b1b1b1; /*边框为1个像素及颜色*/
64 border-top: 0px; /*取消上方边框*/
65 left: 0px; /*相对于父元素LI，左侧对齐*/
66 overflow: hidden; /*内容超出范围隐藏*/
67 position: absolute; /*绝对定位，相对于LI*/
68 top: 37px; /*LI的高度为37PX，这里设置37px，刚好与li底部衔接*/
69 width: 474px;
70 z-index: 1000; /*防止覆盖*/
71 display: none;
72 }
73
74 .subitem { /*设置二级菜单内部层*/
75 float: left; /*左侧浮动*/
76 height: auto;
77 min-height: 100px; /*最小高度为100px*/
78 padding: 10px 12px; /*左右内部各填充12px，上下填充10px*/
79 width: 450px; /*宽度450+12+12，正好为父DIV的宽度*/
80 }
81
82 .subitem dl { /*设置自定义列表*/
83 border-top: 1px dashed #c4c4c4; /*上方设置边框*/
84 overflow: hidden; /*超出部分隐藏*/
85 padding: 8px 0px; /*上下设置填充8px*/
86 float: left; /*所有自定义列表向左浮动，两个列表就会分层显示*/
87 }
88
89 .fore {
90 border-top-style: none;
91 padding-top: 0px;
92 }
93
94 .subitem dt { /*设置自定义列表的标题*/
95 float: left; /*向左浮动*/
96 font-weight: bold;
97 line-height: 16px;
98 padding: 4px 3px;
99 text-align: center; /*文本显示居中*/
100 width: 76px; /*每个标题宽度设置*/
101 }
102
103 .subitem dt a { /*设置标题中链接文本的颜色，字体大小，粗体*/
104 color: #000;
105 font-weight: 700;
106 font-size: 12px;
107 padding: 0px;
108 }
109
110 .subitem dd { /*设置自定义列表的条目，左侧浮动，每个条目的总宽度为364PX,内部无填充*/
111 float: left;
112 overflow: hidden;
113 padding: 0px;
114 width: 364px;
115 }
116
117 .subitem em { /*设置条目中的每个内容元素*/
118 border-right: 1px solid #ccc; /*右侧设置边框，用于隔开每个内容*/
119 float: left; /*所有条目内容向左侧浮动*/
120 font-style: normal; /*em本为斜体，这里更改为普通字体*/
121 height: 14px;
122 line-height: 14px; /*行高设置与高度一样，字体有垂直中间的效果*/
123 margin: 5px 0px; /*上下设置外边距*/
124 padding: 0 8px; /*左右设置内边距*/
125 }
126
127 .subitem em a {
128 color: #666; /*设置字体颜色*/
129 white-space: nowrap; /*设置文本就算在长也不允许换行*/
130 font-size: 12px;
131 font-weight: normal;
132 padding: 0px;
133 }
134
135 .subitem em.noborder { /*设置最后一个元素 右侧的边框取消*/
136 border-right: 0 none;
137 }
138 </style>
139 </head>
140 <body>
141 <div id="nav" class="mainNav">
142 <ul class="nav">
143 <li><a href="#">首 页</a></li>
144 <li><a href="#">品 牌</a>
145 <div class="jnNav">
146 <div class="subitem">
147 <dl class="fore">
148 <dt>
149 <a href="#nogo">品牌：</a>
150 </dt>
151 <dd>
152 <em><a href="#">耐克</a></em>
153 <em><a href="#">阿迪达斯</a></em>
154 <em><a href="#">达芙妮</a></em>
155 <em><a href="#">李宁</a></em>
156 <em><a href="#">安踏</a></em>
157 <em><a href="#">奥康</a></em>
158 <em><a href="#">骆驼</a></em>
159 <em><a href="#">特步</a></em>
160 <em><a href="#">耐克</a></em>
161 <em><a href="#">阿迪达斯</a></em>
162 <em><a href="#">达芙妮</a></em>
163 <em><a href="#">李宁</a></em>
164 <em class="noborder"><a href="#nogo">特步</a></em>
165 </dd>
166 </dl>
167 <dl>
168 <dt>
169 <a href="#nogo">品牌：</a>
170 </dt>
171 <dd>
172 <em><a href="#">耐克</a></em>
173 <em><a href="#">阿迪达斯</a></em>
174 <em><a href="#">达芙妮</a></em>
175 <em><a href="#">李宁</a></em>
176 <em><a href="#">安踏</a></em>
177 <em><a href="#">奥康</a></em>
178 <em><a href="#">骆驼</a></em>
179 <em><a href="#">特步</a></em>
180 <em><a href="#">耐克</a></em>
181 <em><a href="#">阿迪达斯</a></em>
182 <em><a href="#">达芙妮</a></em>
183 <em><a href="#">李宁</a></em>
184 <em class="noborder"><a href="#nogo">特步</a></em>
185 </dd>
186 </dl>
187 </div>
188 </div>
189 </li>
190 <li><a href="#">女 装</a>
191 <div class="jnNav">
192 <div class="subitem">
193 <dl class="fore">
194 <dt>
195 <a href="#nogo">女 装：</a>
196 </dt>
197 <dd>
198 <em><a href="#nogo">耐克</a></em>
199 <em><a href="#nogo">阿迪达斯</a></em>
200 <em><a href="#nogo">达芙妮</a></em>
201 <em><a href="#nogo">李宁</a></em>
202 <em><a href="#nogo">安踏</a></em>
203 <em><a href="#nogo">奥康</a></em>
204 <em><a href="#nogo">骆驼</a></em>
205 <em><a href="#nogo">特步</a></em>
206 <em><a href="#nogo">耐克</a></em>
207 <em><a href="#nogo">阿迪达斯</a></em>
208 <em><a href="#nogo">达芙妮</a></em>
209 <em><a href="#nogo">李宁</a></em>
210 <em class="noborder"><a href="#nogo">特步</a></em>
211 </dd>
212 </dl>
213 <dl>
214 <dt>
215 <a href="#nogo">女 装：</a>
216 </dt>
217 <dd>
218 <em><a href="#nogo">耐克</a></em>
219 <em><a href="#nogo">阿迪达斯</a></em>
220 <em><a href="#nogo">达芙妮</a></em>
221 <em><a href="#nogo">李宁</a></em>
222 <em><a href="#nogo">安踏</a></em>
223 <em><a href="#nogo">奥康</a></em>
224 <em><a href="#nogo">骆驼</a></em>
225 <em><a href="#nogo">特步</a></em>
226 <em><a href="#nogo">耐克</a></em>
227 <em><a href="#nogo">阿迪达斯</a></em>
228 <em><a href="#nogo">达芙妮</a></em>
229 <em><a href="#nogo">李宁</a></em>
230 <em class="noborder"><a href="#nogo">特步</a></em>
231 </dd>
232 </dl>
233 </div>
234 </div>
235 </li>
236 <li><a href="#">男 装</a>
237 <div class="jnNav">
238 <div class="subitem">
239 <dl class="fore">
240 <dt>
241 <a href="#nogo">男 装：</a>
242 </dt>
243 <dd>
244 <em><a href="#nogo">耐克</a></em>
245 <em><a href="#nogo">阿迪达斯</a></em>
246 <em><a href="#nogo">达芙妮</a></em>
247 <em><a href="#nogo">李宁</a></em>
248 <em><a href="#nogo">安踏</a></em>
249 <em><a href="#nogo">奥康</a></em>
250 <em><a href="#nogo">骆驼</a></em>
251 <em><a href="#nogo">特步</a></em>
252 <em><a href="#nogo">耐克</a></em>
253 <em><a href="#nogo">阿迪达斯</a></em>
254 <em><a href="#nogo">达芙妮</a></em>
255 <em><a href="#nogo">李宁</a></em>
256 <em class="noborder"><a href="#nogo">特步</a></em>
257 </dd>
258 </dl>
259 <dl>
260 <dt>
261 <a href="#nogo">男 装：</a>
262 </dt>
263 <dd>
264 <em><a href="#nogo">耐克</a></em>
265 <em><a href="#nogo">阿迪达斯</a></em>
266 <em><a href="#nogo">达芙妮</a></em>
267 <em><a href="#nogo">李宁</a></em>
268 <em><a href="#nogo">安踏</a></em>
269 <em><a href="#nogo">奥康</a></em>
270 <em><a href="#nogo">骆驼</a></em>
271 <em><a href="#nogo">特步</a></em>
272 <em><a href="#nogo">耐克</a></em>
273 <em><a href="#nogo">阿迪达斯</a></em>
274 <em><a href="#nogo">达芙妮</a></em>
275 <em><a href="#nogo">李宁</a></em>
276 <em class="noborder"><a href="#nogo">特步</a></em>
277 </dd>
278 </dl>
279 </div>
280 </div>
281 </li>
282 <li><a href="#">鞋包配饰</a></li>
283 </ul>
284 </div>
285 </body>
286 </html>
效果图：
这个效果主体是根据他人源码修改的，我加上了自己的理解，这样便于学习，仅仅学习用
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
