Jquery制作下拉菜单实现二级菜单缓慢淡出入效果
1.实现出入效果--Jquery
<html>
<title>nav</title>
<head>
<style>
*{margin:0; padding:0}
ul{margin:0, auto;list-style:none}
#nav{background:#eee; width:572px; height:60px;margin:0 auto;}
ul li{float:left; text-align:center; line-height:60px;padding:0px;position:relative;}
a{text-decoration:none; color:#000;display:block;padding:0 45px;}
a:hover{color:#FFF;background-color:#666;}
ul li ul li{float:none;background-color:#eee;margin-top:2px;}
ul li ul{position:absolute;left:0px;top:60px;display:none}
ul li ul li a{padding:0 25px}
</style>
<script src="C:\Users\aaron.li01\Desktop\review dev\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".top-nav li").mousemove(function(){
$(this).find("ul").slideDown("1000");
});
$(".top-nav li").mouseleave(function(){
$(this).find("ul").slideUp("slow");
});
});
</script>
</head>
<body>
<div >
<ul class="top-nav">
<li class="navmenu"><a href="#">Home</a>
<ul>
<li><a href="#">BlueSea</a></li>
<li><a href="#">WhiteHouse</a></li>
</ul>
</li>
<li><a href="#">Species</a>
<ul>
<li><a href="#">BlueSea</a></li>
<li><a href="#">WhiteHouse</a></li>
</ul>
</li>
<li><a href="#">Management</a>
<ul>
<li><a href="#">BlueSea</a></li>
<li><a href="#">WhiteHouse</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>2.普通的二级菜单的显示（鼠标经过时）
<html>
<title>nav</title>
<head>
<style>
*{margin:0; padding:0}
ul{margin:0, auto;list-style:none}
#nav{background:#eee; width:572px; height:60px;margin:0 auto;}
ul li{float:left; text-align:center; line-height:60px;padding:0px;position:relative;}
a{text-decoration:none; color:#000;display:block;padding:0 45px;}
a:hover{color:#FFF;background-color:#666;}
ul li ul li{float:none;background-color:#eee;margin-top:2px;}
ul li ul{position:absolute;left:0px;top:60px;display:none}
ul li ul li a{padding:0 25px}
</style>
<script src="C:\Users\aaron.li01\Desktop\review dev\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
});
</script>
</head>
<body>
<div >
<ul class="top-nav">
<li class="navmenu"><a href="#">Home</a>
<ul>
<li><a href="#">BlueSea</a></li>
<li><a href="#">WhiteHouse</a></li>
</ul>
</li>
<li><a href="#">Species</a>
<ul>
<li><a href="#">BlueSea</a></li>
<li><a href="#">WhiteHouse</a></li>
</ul>
</li>
<li><a href="#">Management</a>
<ul>
<li><a href="#">BlueSea</a></li>
<li><a href="#">WhiteHouse</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>