摘要：样式改成了对联形式，三级下拉的效果还没有完全理解，find()用法不是很熟悉<!doctype html><html> <head> <meta charset="gbk"> <meta name="Keywords" content="">&n
样式改成了对联形式，三级下拉的效果还没有完全理解，find()用法不是很熟悉
<!doctype html>
<html>
<head>
<meta charset="gbk">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>三级下拉效果</title>
<script src='jquery-3.3.1.min.js'></script>
</head>
<style>
*{margin:0;padding:0}
li{list-style:none}
#box{width:80px;height:100%;background:#ccc;position:absolute;left:0;top:0}
.danhang{width:100%;height:80px;background:#f00;text-align:center;font-size:20px;color:#fff;font-weight:bold;line-height:80px}
.one li{height:50px;line-height:50px;border-bottom:1px solid #fff;text-align:center;color:#fff;font-weight:bold}
/*.one{position:relative;}*/
.two{position:absolute;left:80px;background:#ccc;width:80px;top:80px;}
.three{position:absolute;left:80px;background:#ccc;width:80px;top:0px;}
</style>
<script>
$(function(){
$('.two').hide();
$('.three').hide();
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(500);
})
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(500);
})
$('.two-1').mouseover(function(){
$(this).find('.three').slideDown(500);
})
$('.two-1').mouseleave(function(){
$(this).find('.three').slideUp(500);
})
})
</script>
<body>
<div id='box'>
<div>我是导航</div>
<ul>
<li>1-1</li>
<li>1-2
<ul>
<li>2-1</li>
<li>2-2
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
<li>2-3</li>
</ul>
</li>
<li>1-3</li>
<li>1-4</li>
<li>1-5</li>
<li>1-6</li>
<li>1-7</li>
</ul>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-08 09:25:13
老师总结：<meta charset="gbk"> 以后不要再用这个编码集了
