abstrak：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>網(wǎng)頁導航</title> <script src="../Jquery/jquery-3.4.1.min.js"></script> <
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)頁導航</title>
<script src="../Jquery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="list1.css"/>
<script>
$(document).ready(function(){
// 隱藏2-3級下拉菜單
$('.twobox').hide()
$('.three').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').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 class="two">電腦類型
<ul class="three">
<li>筆記本1</li>
<li>筆記本2</li>
<li>筆記本3</li>
<li>筆記本4</li>
<li>筆記本5</li>
</ul>
</li>
<li class="two">產(chǎn)品3
<ul class="three">
<li>手機1</li>
<li>手機2</li>
<li>手機3</li>
<li>手機4</li>
<li>手機5</li>
</ul>
<li>拍照系列</li>
</li>
</ul>
</li>
<li>公司新聞
<ul class="twobox">
<li>公司新聞1</li>
<li class="two">公司新聞2
<ul class="three">
<li>今日頭條</li>
<li>午夜劇場</li>
<li>聚焦點擊</li>
<li>榜上頭條</li>
</ul>
<li>公司新聞3</li>
<li>公司新聞4</li>
</li>
</ul>
</li>
<li>行業(yè)資訊</li>
<li>聯(lián)系我們</li>
</ul>
</div>
</body>
</html>
Guru membetulkan：天蓬老師Masa pembetulan：2019-05-17 17:39:42
Rumusan guru：像這種下拉菜單 , 實現(xiàn)方案很多的, 純css也行, js也可以了, 大多與定位相關(guān)