jquery实现最简单的下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ padding:0; margin:0; } .menu { width: 120px; background-color: #CCC; position: relative; height: 26px; } .menu .sub { position: absolute; display:none; left: 0px; top: 26px; background-color: #9CF; width: 100%; } </style> <script src="jquery-3.2.1.min.js"></script> <script> $(function(){ $('.menu').mouseover(function(e){ $(this).find('.sub').toggle(); }); $('.menu').mouseout(function(e){ $(this).find('.sub').toggle(); }); }); </script> </head> <body> <div class="menu"> <span>按钮</span> <dl class="sub"> <dd><a href="">选项1</a></dd> <dd><a href="">选项2</a></dd> <dd><a href="">选项3</a></dd> </dl> </div> </body> </html>