摘要：<!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>三級(jí)下拉菜單案例</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;">創(chuàng)業(yè)網(wǎng)</li>
<li>招商合作 <img src="https://a5static.pncdn.cn/templates/a5/201703/images/hot_1.gif" width="22" height="14" /> </li>
<li>申請(qǐng)報(bào)道</li>
<li>原創(chuàng)</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"> 網(wǎng)站交易</li>
<li class="two"><img src="https://a5static.pncdn.cn/templates/a5/201703/images/zjjy-icon.png"> 域名交易
<ul class="three">
<li>數(shù)字域名</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>注冊(cè)</li>
<li>微信</li>
<li>微博</li>
<li>手機(jī)版</li>
<li style="width:70px; margin-left:5px;">網(wǎng)站導(dǎo)航 </li>
</ul>
</div>
<div class="xhx"></div>
</div>
</body>
</html><!--總結(jié)
transform: scaleY(0.4) 縮放
mouseover() 鼠標(biāo)位于元素上
mouseleave() 鼠標(biāo)離開(kāi)元素時(shí)
find() 方法獲得當(dāng)前元素集合中每個(gè)元素的后代，通過(guò)選擇器、jQuery 對(duì)象或元素來(lái)篩選。
.find() 與 .children() 方法類似，不同的是后者僅沿著 DOM 樹(shù)向下遍歷單一層級(jí)。
slideDown() 方法用于向下滑動(dòng)元素。
slideUp() 方法用于向上滑動(dòng)元素。
attr() 方法設(shè)置或返回被選元素的屬性值。
$(selector).attr({attribute:value, attribute:value ...}) 可以設(shè)置多個(gè)屬性的值
-->
批改老師：查無(wú)此人批改時(shí)間：2019-01-17 15:53:53
老師總結(jié)：完成的不錯(cuò)。下次作業(yè)把代碼縮進(jìn)，看著整潔，其他做的都不錯(cuò)，繼續(xù)加油。