サマリー：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三級菜單</title><style type="text/css">*{margin:0px;padding:0px;}.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級菜單</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.menu{width:800px;height:35px;margin:0px auto;margin-top:20px;background:#000;color:#fff;border:1px solid #ccc;border-radius:5px;}
ul{list-style:none}
ul li{float:left;width:100px;height:35px;background: #2d2d2d;font-size:14px;color: #a9a9a9;text-align: center;line-height:35px;border-right:1px solid #ccc;cursor: pointer;}
.twobox li{position: relative;;}
.twobox li:hover{background:#000;color:#fff;}
.one li:hover{background:#000;color:#fff;}
.three{position:absolute;top:0px;left:100px;}
.three li{width:100px;height:30px;background: #2d2d2d;font-size:14px;color: #a9a9a9;}
</style>
<script type="text/javascript" >
$(document).ready(function(){
$('.twobox').hide()
$('.three').hide()
$('.two').hide()
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(500)
})
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(500)
})
$('.two').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.two>li').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>首頁</li>
<li>產(chǎn)品
<ul class="twobox">
<li>產(chǎn)品1</li>
<li>產(chǎn)品2</li>
<li>產(chǎn)品3</li>
</ul>
</li>
<li>新聞
<ul class="twobox">
<li>產(chǎn)品1</li>
<li class="two">產(chǎn)品2
<ul class="three">
<li>細分1</li>
<li>細分2</li>
<li>細分3</li>
</ul>
</li>
<li>產(chǎn)品3</li>
</ul>
</li>
<li>案例
<ul class="twobox">
<li>產(chǎn)品1</li>
<li>產(chǎn)品2</li>
<li>產(chǎn)品3</li>
</ul>
</li>
<li>聯(lián)系我們2</li>
<li>聯(lián)系我們1</li>
<li>聯(lián)系我們1</li>
</ul>
</div>
</body>
</html>
添削の先生：滅絕師太添削時間：2019-02-11 09:48:22
先生のまとめ：可以直接在div上使用display:none;就可以了,一種方法不可以,可以嘗試其他方法解決