jquery制作二级下拉菜单

jquery制作二级下拉菜单

二级下拉菜单是我们在做web前端项目时，比较简单的一个效果。

让我们来看一下如何快速制作，以及一些注意事项。

工具/原料电脑Hbuilder方法/步骤1首先创建一个一级菜单

2为其设置样式，制作一个你喜欢的样式。

3运行，查看一级菜单效果。

4添加二级菜单。

此处用的ul和li作为二级菜单，无论使用什么标签，都一定要把它放在最大.nav容器里，并且与一级菜单同级。

5为二级菜单设置样式

6运行，查看效果。

7首先将二级菜单的显示属性设为隐藏。

因为我们想要的效果是当鼠标移上去时，二级菜单才下拉显示

8接下来引入jQuery文件。

Hbuilder内有jQuery库，插入进去非常方便。

9在html文件中引入jq库，并书写jq脚本。

第一种用到的是mouseenter和mouseleave事件。

第二种用到的是hover事件。

10运行查看最终效果。可以看到，鼠标移上去时，二级菜单下拉显示。