首页jquery二级菜单横向

jquery二级菜单横向

时间: 2024-01-11 11:04:50 浏览: 137

以下是一个使用jQuery实现的二级菜单横向的示例： ```html <!DOCTYPE html> <html> <head> <title>二级菜单横向</title> <style> .menu { list-style: none; padding: 0; margin: 0; } .menu li { display: inline-block; position: relative; } .menu li a { display: block; padding: 10px; background-color: #f2f2f2; color: #333; text-decoration: none; } .menu li ul { display: none; position: absolute; top: 100%; left: 0; background-color: #f2f2f2; padding: 0; margin: 0; } .menu li:hover ul { display: block; } .menu li ul li { display: block; } .menu li ul li a { padding: 10px; color: #333; text-decoration: none; } </style> </head> <body> <ul class="menu"> <li> <a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li> <a href="#">菜单2</a> <ul> <li><a href="#">子菜单4</a></li> <li><a href="#">子菜单5</a></li> <li><a href="#">子菜单6</a></li> </ul> </li> <li> <a href="#">菜单3</a> <ul> <li><a href="#">子菜单7</a></li> <li><a href="#">子菜单8</a></li> <li><a href="#">子菜单9</a></li> </ul> </li> </ul> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.menu li').hover( function() { $('ul', this).stop().slideDown(200); }, function() { $('ul', this).stop().slideUp(200); } ); }); </script> </body> </html> ``` 这个示例中，我们使用了HTML和CSS来创建菜单的基本结构和样式，并使用jQuery来实现菜单的横向展开和收起效果。当鼠标悬停在菜单项上时，子菜单会展开；当鼠标离开菜单项时，子菜单会收起。

阅读全文