abstract：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级下拉菜单案例</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.header{
width: 100%;
height: 35px;
margin-top:0px;
background:#f8f8f8;
}
.main{
width: 1100px;
height: 35px;
background: #f8f8f8;
margin-right: auto;
margin-left: auto;
margin-top:0px;
}
ul{
list-style-type: none;
}
ul li{ float:left;}
.left li{
height:35px;
width:100px;
line-height:30px;
text-align: center;
border-right-width:1px;
border-right-color:gray;
border-right-style:solid;
}
.left li:hover{
text-decoration: underline;
}
.right{ width:400px; float:right;}
.right li{height:35px; width:45px; line-height:30px; text-align:center; font-size:14px;}
.xhx{
width: 100%;
position: relative;
border-bottom-color: #CCC;
border-bottom-style: solid;
transform: scaleY(0.4)
}
.onebox li{
width: 100px;
height: 30px;
position: relative;
text-align: left;
top: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
}
.three{
position: absolute;
left: 100px;
top: 0px;
margin-left: 5px;
}
.three li{ width:75px;}
</style>
<script>
$(function(){
$('.onebox').hide()
$('.three').hide()
$('.left>li').mouseover(function(){
$(this).find('.onebox').slideDown(500)
$('i').attr('class','fa fa-angle-up')
})
$('.left>li').mouseleave(function(){
$(this).find('.onebox').slideUp(500)
$('i').attr('class','fa fa-angle-down')
})
$('.onebox>li').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.onebox>li').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</head>
<body>
<div class="header">
<div class="main">
<ul class="left">
<li style="margin-left:0px;">创业网</li>
<li>招商合作 <img src="https://a5static.pncdn.cn/templates/a5/201703/images/hot_1.gif" width="22" height="14" /> </li>
<li>申请报道</li>
<li>原创</li>
<li class="one">A5交易所<span class="btn">
<i class='fa fa-angle-down'></i>
</span>
<ul class="onebox">
<li><img src="https://a5static.pncdn.cn/templates/a5/201703/images/zjjy-icon.png"> 网站交易</li>
<li class="two"><img src="https://a5static.pncdn.cn/templates/a5/201703/images/zjjy-icon.png"> 域名交易
<ul class="three">
<li>数字域名</li>
<li>字母域名</li>
<li>拼音域名</li>
</ul>
</li>
<li><img src="https://a5static.pncdn.cn/templates/a5/201703/images/zjjy-icon.png"> 新媒体交易</li>
</ul>
</i>
</li>
</ul>
<ul class="right">
<li>登录</li>
<li>注册</li>
<li>微信</li>
<li>微博</li>
<li>手机版</li>
<li style="width:70px; margin-left:5px;">网站导航 </li>
</ul>
</div>
<div class="xhx"></div>
</div>
</body>
</html><!--总结
transform: scaleY(0.4) 缩放
mouseover() 鼠标位于元素上
mouseleave() 鼠标离开元素时
find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。
slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
attr() 方法设置或返回被选元素的属性值。
$(selector).attr({attribute:value, attribute:value ...}) 可以设置多个属性的值
-->
Correcting teacher：查无此人Correction time：2019-01-17 15:53:53
Teacher's summary：完成的不错。下次作业把代码缩进，看着整洁，其他做的都不错，继续加油。
