摘要：<!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>無(wú)標(biāo)題文檔</title>
<script src="js/jquery-3.4.0.min.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.menu{ width:800px; height:35px; margin:0px; background:#2d2d2d;color:#fff; border:1px solid #ccc; border-radius:5px; margin-top:20px;}
ul{ list-style:none;}
ul li{ width:100px; height:35px; line-height:35px; text-align:center; float:left; border-right:1px solid #ccc; cursor:pointer;}
.twobox li{ width:100px; height:30px; line-height:30px; background-color:pink; position:relative; border:0px}
.twobox li:hover{background:#000;color:#fff;}
.three {position:absolute;top:0px; left:100px }
.three li{ width:99px; height:30px; line-height:30px; border:0;}
</style>
</head>
<body>
<script type="text/javascript">
//放入javascript代碼或者jQuery代碼
//文檔就緒函數(shù)
$(document).ready(function() {
$(".twobox").hide();
$(".three").hide();
$(".onebox>li").mouseover(
function(){
$(this).find(".twobox").slideDown(500);
}
);
$(".onebox>li").mouseleave(
function(){
$(this).find(".twobox").slideUp(500);
}
);
$(".twobox>li").mouseover(
function(){
$(this).find(".three").slideDown(500);
}
);
$(".twobox>li").mouseleave(
function(){
$(this).find(".three").slideUp(500);
}
);
});
</script>
<div class="menu">
<ul class="onebox"><!--一級(jí)菜單-->
<li >首頁(yè)</li>
<li >產(chǎn)品
<ul class="twobox">
<li>產(chǎn)品1</li>
<li class="two">產(chǎn)品2
<ul class="three">
<li>產(chǎn)品2.1</li>
<li>產(chǎn)品2.2</li>
<li>產(chǎn)品2.3</li>
</ul>
</li>
<li>產(chǎn)品3
<ul class="three">
<li>產(chǎn)品3.1</li>
<li>產(chǎn)品3.2</li>
<li>產(chǎn)品3.3</li>
</ul>
</li>
</ul>
</li>
<li>關(guān)于我們</li>
<li>聯(lián)系我們</li>
<li>公司新聞</li>
<li>公司地址</li>
</ul>
</div>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-04-18 13:16:43
老師總結(jié)：多級(jí)下拉菜單 , 就是一個(gè)不斷的查找的過(guò)程, 這個(gè)技能 在很多場(chǎng)景下都有應(yīng)用的....