js:
<script type="text/javascript">
$(function() {
var _this1 = null;
$('.nav>li').hover(function() {
_this1 = $(this);
_this1.find('.second-nav').show();
var _this2 = null;
_this1.find('.second-nav').find('li').hover(function() {
_this2 = $(this);
_this2.find('.third-nav').show();
_this2.find('.third-nav').hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
}, function() {
_this2.find('.third-nav').hide();
});
}, function() {
_this1.find('.second-nav').hide();
});
});
</script>
css:
ul{
list-style: none;
}
a{
text-decoration: none;
}
.header{
height: 50px;
background: #0d0992;
}
.header .nav{
width: 1200px;
height: 50px;
line-height: 50px;
margin: 0 auto;
position: relative;
z-index: 111;
padding-left: 0px;
}
.header .nav li{
float: left;
width: 14.28%;
height: 50px;
line-height: 50px;
text-align: center;
}
.header .nav li a{
color: #fff;
}
.header .nav li .second-nav{
width: 150px;
display: none;
position: relative;
padding: 0px;
}
.header .nav li .second-nav li{
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
background: #0d0992;
border-top: 1px solid #4944d4;
}
.header .nav li .second-nav li .third-nav{
/*position: absolute;*/
width: 150px;
height: 200px;
display: none;
margin-left: 100%;
margin-top: -40px;
}
html:
<div class="header">
<ul class="nav">
<li><a href="#">当季爆款</a>
<ul class="second-nav">
<li><a href="#">两件套</a>
</li>
<li><a href="#">碎花裙</a>
</li>
<li><a href="#">背带裤</a></li>
</ul>
</li>
<li><a href="#">当季新品</a>
<ul class="second-nav">
<li><a href="#">两件套</a></li>
<li><a href="#">碎花裙</a></li>
</ul>
</li>
<li><a href="#">最新排行</a>
<ul class="second-nav">
<li><a href="#">碎花裙</a>
</li>
<li><a href="#">阔腿裤</a></li>
</ul>
</li>
<li><a href="#">春季爆款</a>
<ul class="second-nav">
<li><a href="#">棒球服</a></li>
<li><a href="#">小皮衣</a></li>
<li><a href="#">小风衣</a></li>
<li><a href="#">小披肩</a></li>
<li><a href="#">小风衣</a></li>
</ul>
</li>
<li><a href="#">夏季爆款</a>
<ul class="second-nav">
<li><a href="#">两件套</a>
</li>
<li><a href="#">背带裤</a></li>
<li><a href="#">碎花裙</a>
</li>
</ul>
</li>
<li><a href="#">秋季爆款</a>
<ul class="second-nav">
<li><a href="#">碎花裙</a>
</li>
<li><a href="#">阔腿裤</a></li>
</ul>
</li>
<li><a href="#">冬季爆款</a></li>
</ul>
</div>