css:
.user1-jdhead ul{list-style:none;}
.user1-jdhead{width:100%;background:url() repeat-x;height:150px;}
.user1-jdhead a,.user-jdhead span{display:inline-block;}
.user1-jdhead a img{border:0;}
.user1-jdhead a,.user1-jdhead a:hover{text-decoration:none;cursor:pointer;}
.user1head{width:990px;background-color:#ccc; background-image:url(); background-repeat:repeat-x; height:150px; position:absolute;margin:0 auto;}
.user1head input{border:0;}
.user1head span,.user1_rs,.user1_inp,.user1_nav_r{display:inline-block;}
.user1head a{display:inline-block; text-align:center;text-decoration:none; font-size:12px;}
.user1_nav_l a{position:relative; float:left;}
.user1_nav_l{height:30px;overflow:hidden;position:absolute;top:119px;left:0;z-index:5;}
.user1_nav_l li{float:left;width:98px;height:30px; line-height:30px;position:relative;-webkit-transition:top .2s ease-out;-moz-transition:top .2s ease-out;-o-transition:top .2s ease-out;-ms-transition:top .2s ease-out;transition:top .2s ease-out;}
.user1_nav_l .k_97{width:98px;height:30px;}
.user1_nav_l span{color:#000;}
.user1_nav_l li:hover,.user1_lb:hover span{top:-30px;}
.user1_nav_l a{background:#495071;color:#fff;border-right:1px solid #70768f;}
.user1_nav_l span,.user1_nav_l a{width:97px;height:30px; line-height:30px;display:block;text-align:center; cursor:pointer;}
.user1_lb{height:30px;width:318px;overflow:hidden;position:absolute;z-index:4;top:119px;left:196px;-webkit-transition:height .3s ease-out;-moz-transition:height .3s ease-out;-o-transition:height .3s ease-out;-ms-transition:height .3s ease-out;transition:height .3s ease-out;}
.user1_lbx{width:318px;height:187px;position:absolute;top:30px;background:url() repeat-y;}
.user1_lbs{width:98px;height:30px;overflow:hidden;position:absolute;top:0;}
.user1_lbs span{width:97px;height:30px;line-height:30px;cursor:pointer;text-align:center;position:relative;-webkit-transition:top .2s ease-out;-moz-transition:top .2s ease-out;-o-transition:top .2s ease-out;-ms-transition:top .2s ease-out;transition:top .2s ease-out}
.user1_lbs .z_s_jt{background:url() no-repeat 75px 0;;top:0;color:#000;}
.user1_lbs .z_a_jt{background-color:#495071;background-image:url(); background-repeat:no-repeat; background-position:75px -30px;color:#fff;}
.user1_lb:hover .user1_lbx{display:block;}
.user1_lb:hover{height:217px;}
.user1slide{width:253px;height:142px;position:absolute;top:21px;left:27px;overflow:hidden;}
.user1slide span,.user1slide a,.user1slide_hd label{cursor:pointer; display:inline-block;}
.user1slide_bd{width:169px;height:142px;overflow:hidden;position:absolute;left:-1px; top:0; z-index:3;}
.user1slide_bd .ce{width:400%;height:100%;position:absolute;left:0;top:0;-webkit-transition:left .4s ease-out; -moz-transition:left .4s ease-out;-o-transition:left .4s ease-out;-ms-transition:left .4s ease-out;transition:left .4s ease-out;}
.user1slide_bd .ce li{float:left;}
.user1slide_bd .ce li img{width:169px;height:142px;}
.user1slide_hd{position:absolute; right:0; top:0; z-index:4;width:60px;height:142px;}
.user1slide_hd label{width:57px;}
.user1slide_hd label span{width:10px; height:10px; line-height:10px; border-radius:10px;background:#999;text-indent:-9999px;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .1s ease-in;-moz-transition:-webkit-transform .1s ease-in;-o-transition:-webkit-transform .1s ease-in;-ms-transition:-webkit-transform .1s ease-in;transition:-webkit-transform .1s ease-in;}
.user1head #user1slider1:hover~.user1slide_hd label:nth-child(1) span,.user1head #user1slider2:hover~.user1slide_hd label:nth-child(2) span,.user1head #user1slider3:hover~.user1slide_hd label:nth-child(3) span,.user1head #user1slider4:hover~.user1slide_hd label:nth-child(4) span{background:#f00;-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}
.user1slide_hd label a{color:#4b4b4b;height:34px;line-height:34px;padding-left:6px;font-size:12px;}
.user1slide_hd label a:hover{color:#000;font-size:12px;}
.user1slide input{display:none;}
.user1head #user1slider1:hover~.user1slide_bd .ce{left:0;}
.user1head #user1slider2:hover~.user1slide_bd .ce{left:-100%;}
.user1head #user1slider3:hover~.user1slide_bd .ce{left:-200%;}
.user1head #user1slider4:hover~.user1slide_bd .ce{left:-300%;}
模块内容：
<div class="user1-jdhead">
<div class="user1head">
<ul class="user1_nav_l">
<li>
<span>首页</span><a title="首页">首页</a>
</li>
<li>
<span>全部产品</span><a title="全部产品">全部产品</a>
</li>
</ul>
<div class="user1_lb">
<div class="user1_lbs">
<span class="z_s_jt">产品类型</span><span class="z_a_jt">产品类型</span>
</div>
<div class="user1_lbx">
<div class="user1slide">
<input type="radio" name="user1slider" id="user1slider1" />
<input type="radio" name="user1slider" id="user1slider2" />
<input type="radio" name="user1slider" id="user1slider3" />
<input type="radio" name="user1slider" id="user1slider4" />
<div class="user1slide_bd">
<ul class="ce">
<li>
<a ><img src="http://img14.360buyimg.com/cms/g15/M01/0D/02/rBEhWFJIz8cIAAAAAAA7NszkrgkAADrxwOcZ9gAADtO885.jpg" alt="" /></a>
</li>
<li>
<a ><img src="http://img14.360buyimg.com/cms/g15/M01/0D/02/rBEhWlJIz8gIAAAAAAAmMcnhRk4AADrxwOlJwwAACZJ372.jpg" alt="" /></a>
</li>
<li>
<a ><img src="http://img14.360buyimg.com/cms/g15/M01/0D/02/rBEhWlJIz8YIAAAAAABCTscqLEYAADrxwOPe80AAEJm904.jpg" alt="" /></a>
</li>
<li>
<a ><img src="http://img10.360buyimg.com/cms/g15/M01/0D/02/rBEhWlJIz8kIAAAAAABeqNoNlacAADrxwOrON8AAF7A838.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="user1slide_hd">
<label for="user1slider1"><span></span><a >板 鞋</a></label> <label for="user1slider2"><span></span><a >低帮鞋</a></label> <label for="user1slider3"><span></span><a >中帮鞋</a></label> <label for="user1slider4"><span></span><a >高帮鞋</a></label>
</div>
</div>
</div>
</div>
<ul class="user1_nav_l" style="left:293px;">
<li>
<span>布洛克系</span><a title="布洛克系">布洛克系</a>
</li>
<li>
<span>马丁潮靴</span><a title="马丁潮靴">马丁潮靴</a>
</li>
</ul>
</div>
</div>
</div>