<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘> <meta http-equiv=‘X-UA-Compatible‘ content=‘IE=edge‘> <title> </title> <meta name=‘viewport‘ content=‘width=device-width, initial-scale=1‘> <link rel=‘stylesheet‘ type=‘text/css‘ media=‘screen‘ href=‘test.css‘> <script src="jquery.js"> type="text/javascript"</script> <script src=‘test.js‘ type="text/javascript"></script> </head> <body> <div class="panel"> <ul class="menu"> <li>AAA <ul> <li>a</li> <li>a</li> <li>a</li> </ul> </li> <li>BBB <ul> <li>b</li> <li>b</li> <li>b</li> </ul> </li> <li>CCC <ul> <li>c</li> <li>c</li> <li>c</li> </ul> </li> </ul> </div> </body> </html>
*{ margin: 0; padding: 0; } .panel{ height: 30px; width: 180px; } .menu{ height: 30px; width: 100%; background-color: aliceblue; line-height: 30px; } .menu>li{ list-style: none; float: left; position: relative; cursor: pointer; margin-left: 20px; } .menu li ul{ position: absolute; left: 0; top:30px; width: 40px; display: none; } .menu li ul li{ text-align: center; list-style:none; }
$(function(){ $(".menu>li").hover(function(){ $(this).children().stop(true).slideToggle(); }) })
原文：https://www.cnblogs.com/tomatofjy/p/11630667.html