布局：
<div class="wrapper">
<div class="menuList">
<ul>
<li>
<a href="#">家用电器</a>
<s></s>
<div class="zicaidan" >
<a>女装</a>
<a>男装</a>
<a>女装</a>
<a>男装</a>
<a>女装</a>
<a>男装</a>
<a>更多</a>
</div>
</li>
<li>
<a href="#">手机，数码</a>
<s></s>
<div class="zicaidan" > ffffff</div>
</li>
<li>
<a href="#">电脑，办公</a>
<s></s>
<div class="zicaidan" >
<a>女装</a>
<a>男装</a>
<a>女装</a>
<a>男装</a>
<a>女装</a>
<a>男装</a>
</div>
</li>
<li>
<a href="#">男装，女装</a>
<s></s>
<div class="zicaidan" >
<a>女装</a>
<a>男装</a>
<a>女装</a>
<a>男装</a>
<a>女装</a>
<a>男装</a>
</div>
</li>
<li>
<a href="#">个性化妆</a>
<s></s>
<div class="zicaidan" > ffffff</div>
</li>
<li>
<a href="#">箱包，钟表</a>
<s></s>
<div class="zicaidan" > ffffff</div>
</li>
<li>
<a href="#">母婴，玩具</a>
<s></s>
<div class="zicaidan" > ffffff</div>
</li>
<li>
<a href="#">食品</a>
<s></s>
<div class="zicaidan" > ffffff</div>
</li>
<li>
<a href="#">营养保健</a>
<s></s>
<div class="zicaidan" > ffffff</div>
</li>
<li>
<a href="#">彩票</a>
<s></s>
<div class="zicaidan" > ffffff</div>
</li>
</ul>
</div>
</div>
样式：
*{
margin:0;
padding:0;
}
img{
border:none;
}
li{
list-style:none;
}
.wrapper{
margin:20px auto;
width:200px;
}
.menuList{
width:160px;
min-height:300px;
height:auto;
border:1px solid #3459DB;
color:white;
}
.menuList ul li{
float:left;
position:relative;
width:160px;
height:30px;
line-height:30px;
z-index:8;
}
.menuList ul li:hover {
position:relative;
z-index:555;
border-top: 1px solid red;
border-bottom: 1px solid red;
box-shadow: 0px 0px 2px #eee;
}
.menuList ul li .zicaidan{
border:1px solid red;
display:none;
background:#ffffff;
width:200px;
height:160px;
position:absolute;
left:160px;
top:-2px;
}
.menuList ul li .zicaidan a{
display:inline-block;
width:50px;
height:30px;
line-height:30px;
color:black;
margin-left:10px;
border-radius:10px;
text-align:center;
}
.menuList ul li .zicaidan a:hover{
background:orange;
}
.menuList ul li a{
font-size:12px;
padding-left:15px;
color:red;
text-decoration:none;
}
.menuList ul li s{
position: absolute;
right: -2px;
top:0px;
width: 10px;
height: 30px;
background-color: white;
z-index:10;
display: none;
}
js调用：
注意：在此之前要在<header>头部引入js。
<script type="text/javascript">
$(document).ready(
function(){
$(".menuList ul li").mouseenter(function(){
$(this).children(".zicaidan").show();
$(this).children("s").show();
});
$(".menuList ul li").mouseleave(function(){
$(this).children(".zicaidan").hide();
$(this).children("s").hide();
});
}
);
</script>
这样就可以轻松的实现想要的效果，还在等什么啊，赶紧过来试一下吧。