實現效果圖：
功能：點擊某一個一級菜單時，相應的二級菜單會下拉出現
實現代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>According</title> <style> * { margin: 0px; padding: 0; } .nav{ list-style: none; width: 300px; margin: 100px auto; background: #ffb2a7; } .nav>li{ border: 1px solid #000000; line-height: 35px; border-bottom: none; position:relative; text-align: center; } .nav>li:last-child{ border-bottom: 1px solid #000000; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .nav>li:first-child{ border-top-right-radius: 10px; border-top-left-radius: 10px; } .nav>li>ul{ list-style: none; background: #f8615a; display: none; } .nav>li>ul>li{ border-top: 1px solid #ffb2a7; line-height: 35px; } .nav>li>ul>li:hover{ background: #b80d57; } .nav>li>span{ background:url("./img/下拉前.png") no-repeat center center; display: inline-block; width: 32px; height: 32px; position:absolute; right: 10px; top: 5px; } </style > <script src="./lib/jquery-1.11.3/jquery-1.11.3/jquery.min.js"></script> <script> $(function(){ $(".nav>li").click(function(){ var $sub =$(this).children(".sub"); $sub.slideDown(1000); var otherSub=$(this).siblings().children(".sub"); otherSub.slideUp(1000); }) }); </script> </head> <body> <ul class="nav"> <li>一級菜單一 <ul class="sub"> <li>二級菜單</li> <li>二級菜單</li> </ul> </li> <li>一級菜單二 <ul class="sub"> <li>二級菜單</li> <li>二級菜單</li> </ul> </li> <li>一級菜單三 <ul class="sub"> <li>二級菜單</li> <li>二級菜單</li> </ul> </li> <li>一級菜單四 <ul class="sub"> <li>二級菜單</li> <li>二級菜單</li> </ul> </li> </ul> </body> </html>