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 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 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 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 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 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>
效果图：
这个效果主体是根据他人源码修改的，我加上了自己的理解，这样便于学习，仅仅学习用