类似淘宝的导航栏

效果图

html代码

 1 <div class="end_wrap"> 2         <div class="end_box"> 3             <ul> 4                 <li class="shiling"> 5                     <dl> 6                         <dt> 7                             <h3>时令周边游</h3> 8                             <p><a href="">天数</a><a href="">丽水</a><a href="">台州</a><a href="">休闲度假</a></p> 9                         </dt>10                         <dd>11                             <div class="navcontent clear">12                                 <div class="subitem">13                                     <div class="li_dl">14                                         <div class="li_dl_dt">漂流</div>15                                         <div class="li_dl_dd"><em><a href="">大峡谷</a></em><em><a href="">三清山</a></em><em><a href="">千岛湖</a></em></div>16                                     </div>17                                     <div class="li_dl">18                                         <div class="li_dl_dt">游乐园</div>19                                         <div class="li_dl_dd"><em><a href="">大峡谷</a></em><em><a href="">三清山</a></em><em><a href="">千岛湖</a></em></div>20                                     </div>21                                 </div>22                                 <div class="subitem">23                                     <div class="li_dl">24                                         <div class="li_dl_dt">名山明水</div>25                                         <div class="li_dl_dd"><em><a href="">大峡谷2</a></em><em><a href="">三清山2</a></em><em><a href="">千岛湖2</a></em></div>26                                     </div>27                                 </div>28                             </div>29                         </dd>30                     </dl>31                 </li>32                 <li class="guonei">33                     <dl>34                         <dt>35                             <h3>国内风行游</h3>36                             <p><a href="">天数</a><a href="">丽水</a><a href="">台州</a><a href="">休闲度假</a></p>37                         </dt>38                         <dd>39                             240                         </dd>41                     </dl>42                 </li>43                 <li class="guoji">44                     <dl>45                         <dt>46                             <h3>国际风尚游</h3>47                             <p><a href="">天数</a><a href="">丽水</a><a href="">台州</a><a href="">休闲度假</a></p>48                         </dt>49                         <dd>50                             351                         </dd>52                     </dl>53                 </li>54                 <li class="gongsi">55                     <dl>56                         <dt>57                             <h3>公司游</h3>58                             <p><a href="">天数</a><a href="">丽水</a><a href="">台州</a><a href="">休闲度假</a></p>59                         </dt>60                         <dd>61                             362                         </dd>63                     </dl>64                 </li>65                 <li class="visa">66                     <dl>67                         <dt>68                             <h3>签证</h3>69                             <p><a href="">天数</a><a href="">丽水</a><a href="">台州</a><a href="">休闲度假</a></p>70                         </dt>71                         <dd>72                             573                         </dd>74                     </dl>75                 </li>76 77             </ul>78         </div>        79     </div>

js代码

1 $(function(){2     $('.end_box ul li').each(function(){3         $(this).hover(function() {4             $(this).addClass('hover')5         }, function() {6             $(this).removeClass('hover')7         });8     })9 })

CSS

 1 *{ margin: 0px; padding: 0px;} 2 ul,li{ list-style:none;} 3 img{ border: 0;} 4 body{font-family: "Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif;color: #404040; font-size: 14px;} 5 .clear { clear:both; zoom:1;} 6 .clear:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} 7 .hide{ display: none;} 8 .show{ display: block;} 9 .fl{ float: left;}10 .fr{ float: right;}11 .pb10{ padding-bottom: 10px;}12 .f12{ font-size: 12px; font-family: 微软雅黑;}13 .f14{ font-size: 14px; font-family: 微软雅黑;}14 .site_wrap{ width: 100%;}15 .sitenav{ float: left; width: 10%; background: #fcfcfc; padding: 10px 0;}16 .nav_top,.nav_con{ width: 95%; margin: 0px auto;}17 .nav_top{ margin-bottom: -1px;}18 .nav_top ul li{ float: left; display: inline; margin-right: 3px; padding: 0 15px; height: 25px; line-height: 25px; border-radius:2px; background: #cfcfcf; color: #333; border: 1px solid #ccc; margin-left: -1px; cursor: pointer;}19 .nav_top ul li.on{ background: #fff; color: #000; border-bottom: 1px solid #fff;}20 .nav_con{ border: 1px solid #ccc;}21 .navcontent{}22 .sitecontent{ float: left; width: 90%; padding: 10px 0;}23 .width130{ float: left; width: 130px; text-align: right; padding-right: 40px; line-height: 25px;}24 .con_style{}25 .con_style input[type='text']{ width: 180px; border-radius: 2px; border: 1px solid #c5c5c5; border-top: 1px solid #c4c4c4; height: 23px; line-height: 23px; padding: 0 5px;-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,.0) inset; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1) inset;}26 .con_style input[type='button'],.con_style button{ border-radius: 2px; border: 1px solid #afafaf; border-top: 1px solid #b0b0b0; height: 25px; line-height: 25px; padding: 0 15px; margin-left: 5px; cursor: pointer;*overflow:visible;}27 .con_style input[type='checkbox'],.con_style input[type='radio']{ position: relative; margin-right: 2px; display: inline; cursor: pointer;}28 .con_style input[type='file']{height: 25px; line-height: 25px; }29 .con_style select{ height: 25px; line-height: 25px; padding: 0; width: 180px; border-radius: 2px; border: 1px solid #c5c5c5; border-top: 1px solid #c4c4c4;}30 .con_style label{ padding-right: 25px;}31 .con_style input.width80{ width: 80px; margin-left: 5px;}32 .search_con{ border:1px solid #ccc; padding: 15px; margin: 10px 0;}33 .con_title{ height: 30px; line-height: 30px; color: #000; font-weight: bold;}34 .con_con label{ display: inline-block;}35 36 .end_wrap{ width: 80%;}37 .end_box{ margin: 6px; height: 320px; background: #f8f6f8; margin-top: 0; position: relative; border-right: 1px solid #f8f6f8;}38 .end_box  li{ display: block; height: 62px; background-position: 20px center; background-repeat: no-repeat; border-right: 1px solid #ccc; width: 297px;}39 .end_box li:hover {background-color: #fff;border: 1px solid #ccc;border-right: 1px solid #fff;}40 .end_box h3{color: #f39b19; font-size: 13pt;}41 .end_box  a{margin-right: 10px; text-decoration: none; color: #404040;}42 .end_box  li dl{ padding-left: 75px; padding-top: 10px; padding-bottom: 3px; width: 223px;}43 .end_box  li dl dt{ display: block;position: relative;}44 .end_box  li dl dd{ width: 867px; border: 1px solid #ccc; height: 318px; position: absolute; z-index: 2; left: 298px; background: #fff; top: