2019-8-21 jquery三级下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级下拉菜单</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
body{
margin:0;
}
li{
list-style:none;
}
ul{
padding:0;
}
.menu{
width:600px;
height:44px;
background:#000;
margin:0 auto;
}
a{
text-decoration: none;
color:#fff;
}
.one{
width:120px;
height: 44px;
float: left;
text-align: center;
line-height: 44px;
}
.twomenu{
width:120px;
background:#000;
position: relative;
}
.threemenu{
width:120px;
background:#000;
margin-top:-44px;
position: absolute;
left:120px;
}
li:hover{
background-color: #333;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$('.twomenu').hide();
$('.threemenu').hide();
$('.one').mouseover(function(){
$(this).find('.twomenu').slideDown(500);
})
$('.one').mouseleave(function(){
$(this).find('.twomenu').slideUp(500);
})
$('.two').mouseover(function(){
$(this).find('.threemenu').slideDown(500);
})
$('.two').mouseleave(function(){
$(this).find('.threemenu').slideUp(500);
})
})
</script>
<ul>
<li><a href="">一级导航01</a>
<ul>
<li><a href="">二级导航01</a>
</li>
<li><a href="">二级导航02</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航03</a>
</li>
<li><a href="">二级导航04</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">一级导航02</a>
<ul>
<li><a href="">二级导航01</a>
</li>
<li><a href="">二级导航02</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航03</a>
</li>
<li><a href="">二级导航04</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">一级导航03</a>
<ul>
<li><a href="">二级导航01</a>
</li>
<li><a href="">二级导航02</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航03</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航04</a>
</li>
</ul>
</li>
<li><a href="">一级导航04</a>
<ul>
<li><a href="">二级导航01</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航02</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航03</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航04</a>
</li>
</ul>
</li>
<li><a href="">一级导航05</a>
<ul>
<li><a href="">二级导航01</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航02</a>
</li>
<li><a href="">二级导航03</a>
<ul>
<li><a href="">三级导航01</a></li>
<li><a href="">三级导航02</a></li>
</ul>
</li>
<li><a href="">二级导航04</a>
</li>
</ul>
</li>
</ul>
</body>
</html>