首页jquery实现二级菜单

jquery实现二级菜单

时间: 2023-11-20 10:58:21 浏览: 114

以下是使用jQuery实现二级菜单的代码： ```html <!DOCTYPE html> <html> <head> <title>jQuery实现二级菜单</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style type="text/css"> ul { list-style: none; margin: 0; padding: 0; } li { float: left; position: relative; margin-right: 20px; } li ul { display: none; position: absolute; top: 20px; left: 0; background-color: #fff; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,.3); } li:hover ul { display: block; } </style> </head> <body> <ul> <li><a href="#">菜单1</a></li> <li> <a href="#">菜单2</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="#">菜单3</a></li> <li><a href="#">菜单4</a></li> </ul> </body> </html> ``` 解释： 1. 首先，我们需要在页面中引入jQuery库，可以使用CDN或者下载到本地。 2. 然后，我们需要在页面中添加HTML结构，包括菜单和子菜单。 3. 最后，我们使用jQuery来实现二级菜单的效果。具体来说，我们给每个菜单项添加一个hover事件，当鼠标移动到菜单项上时，显示对应的子菜单。

阅读全文