如何用jQuery编写示例代码实现二级导航菜单？

本文共计1085个文字，预计阅读时间需要5分钟。

实现一个实用的JQ导航二级菜单效果，导航菜单在网站中非常常见，有的网站甚至会出现三级菜单或多级菜单模式。下面我们来简单实现一个二级菜单的效果。

部分效果截图：


整体代码：

二级菜单示例 .menu { list-style: none; padding: 0; } .menu > li { position: relative; } .menu > li > a { display: block; padding: 10px; text-decoration: none; color: #333; } .submenu { display: none; position: absolute; left: 0; top: 100%; list-style: none; padding: 0; margin: 0; background-color: #f4f4f4; border: 1px solid #ddd; } .menu > li:hover .submenu { display: block; } .submenu > li > a { padding: 10px 20px; }

首页 关于我们 公司简介 团队介绍 产品中心 新闻中心 联系我们

这段代码创建了一个简单的二级菜单，其中关于我们项下有一个子菜单。当鼠标悬停在关于我们上时，子菜单会显示出来。