效果图
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 2 40 </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 3 51 </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 3 62 </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 5 73 </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: 0; display: none; border-left: 0 none; overflow-y: auto;} 45 .end_box li.hover dl dd{ display: block;} 46 .end_box .shiling{ background-image: url(../images/ico_shiling.png);} 47 .end_box .guonei{ background-image: url(../images/ico_train.png);} 48 .end_box .guoji{ background-image: url(../images/ico_plane.png);} 49 .end_box .gongsi{ background-image: url(../images/ico_men.png);} 50 .end_box .visa{ background-image: url(../images/ico_visa.png);} 51 52 .subitem { float: left; width: 385px; min-height: 65px; padding-left: 15px; z-index: 100;} 53 .subitem .li_dl { overflow: hidden; zoom: 1; padding: 5px 0; } 54 .subitem .li_dl_dt { float: left; width: 85px; line-height: 20px; text-align: left; color: #f39b19;} 55 .subitem .li_dl_dd { float: left; width: 300px; } 56 .subitem em { float: left; font-style: normal; white-space: nowrap; height: 14px; line-height: 14px; border-right: 1px solid #ccc; margin: 3px 0; padding: 0 8px; } 57 .subitem em:last-child { border: 0 none; }