jQuery 实现二级菜单

2022-12-09 17:56:40
``` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery实现二级菜单</title> <style> ul, li { list-style: none; padding: 0; } .menu > li { float: left; position: relative; width: 80px; } .sub { display: none; position: absolute; border: 1px solid blue; } </style> </head> <body> <ul class="menu"> <li> <div>菜单1</div> <ul class="sub"> <li>子菜单1</li> <li>子菜单1</li> <li>子菜单1</li> </ul> </li> <li> <div>菜单2</div> <ul class="sub"> <li>子菜单2</li> <li>子菜单2</li> <li>子菜单2</li> </ul> </li> <li> <div>菜单3</div> <ul class="sub"> <li>子菜单3</li> <li>子菜单3</li> <li>子菜单3</li> </ul> </li> </ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(function () { $(".menu>li").hover(function () { $(".sub", this).show() }, function () { $(".sub", this).hide() }) }) </script> </body> </html> ```