1、HTML部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鼠标悬浮滑动下拉二级菜单</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav">
<ul class="main">
<li>首页
</li>
<li id="li-1">消费者服务
<span></span>
<ul id="box_1" class="box_info">
<li>产品信息</li>
<li>商家信息</li>
<li>关于我们</li>
</ul>
</li>
<li id="li-2">商务服务
<span></span>
<ul id="box_2" class="box_info">
<li>服务理念</li>
<li>服务产品</li>
<li>商铺汇总</li>
</ul>
</li>
<li>关于我们
</li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
2、CSS部分
.nav{
margin:100px auto;
width:700px;
height:36px;
background:#643519;
position:relative;
text-align:center;
line-height:36px;
font-size:12px;
}
li{
list-style: none;
float:left;
}
.main>li{
width:150px;
color:#eee;
font-size:14px;
}
.main span{
display:inline-block;
width:7px;
height:7px;
background:url(../images/down-icon.png) no-repeat;
margin-left:18px;
}
.box_info{
width: 110px;
border: 1px solid #643519;
display:none;
position:absolute;
color:#643519;
padding:0;
margin-left:20px;
}
.box_info li{
color: #643519;
cursor: pointer;
font-size:13px;
width:100%;
}
.box_info li:hover{
background: #643519;
color: #fff;
}
/*图标向上旋转*/
.hover-up{
transition-duration: .5s;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
/*图标向下旋转*/
.hover-down{
transition-duration: .5s;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
3、JS部分
$(document).ready(function(){
var num;
$('.main>li[id]').hover(function(){
/*图标向上旋转*/
$(this).find("span").removeClass().addClass('hover-up');
/*下拉框出现*/
var Obj = $(this).attr('id');
num = parseInt(Obj.substring(3, Obj.length));
$('#box_'+num).slideDown(300);
},function(){
/*图标向下旋转*/
$(this).find("span").removeClass().addClass('hover-down');
/*下拉框消失*/
$('#box_'+num).hide();
});
});
4、效果图