首页jquery侧方二级菜单

jquery侧方二级菜单

时间: 2023-11-20 22:58:09 浏览: 73

以下是使用jQuery实现侧方二级菜单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>侧方二级菜单</title> <meta charset="utf-8"> <style type="text/css"> /* 一级菜单样式 */ .menu { position: relative; display: inline-block; padding: 10px; background-color: #eee; cursor: pointer; } /* 二级菜单样式 */ .sub-menu { position: absolute; top: 0; left: 100%; display: none; padding: 10px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.3); } /* 鼠标悬停时显示二级菜单 */ .menu:hover .sub-menu { display: block; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { // 鼠标悬停一级菜单时，显示对应的二级菜单 $('.menu').hover(function() { $(this).find('.sub-menu').show(); }, function() { $(this).find('.sub-menu').hide(); }); }); </script> </head> <body>  <div class="menu">菜单1  <div class="sub-menu">菜单1-1</div> </div> <div class="menu">菜单2 <div class="sub-menu">菜单2-1</div> </div> <div class="menu">菜单3 <div class="sub-menu">菜单3-1</div> </div> </body> </html> ```

阅读全文