最近JS在导航菜单中实现了二级下拉菜单的三种方式，方便在项目中应用。

如何在导航菜单栏中实现二级下拉菜单？

我们可以在淘宝、搜狐等大型网站上看到一些二级下拉菜单，如下图。

但是如何实现类似的画面呢？事实上，我们至少有三种方法来实现这一点。下面，我附上代码供大家参考。

1.仅使用html和css

meta charset=' UTF-8 ' title document/title style * { margin 33600；padd : 0；list-style:无；文本装饰：无；} # nav { width: 500px高度： 40px；背景# cccmargin: 0 auto} ul { background : # AAA } ul Li { float : left；显示：块；高度： 40px；线高： 40px；padding: 0 20px相对位置：} ul Li : hover { background : # CEA；}ul li ul li{float:无；}/*键一：设置二级菜单显示：无；*/ul Li ul { position : absolute；top:40pxleft : 0；display:无；} ul Li ul Li : hover { background : red；}/*键2:当副菜单属于主菜单时，设置为显示： block；*/ul Li : hover ul { display : block；}/style div id='nav' ul lia href='主页/a/li lia href='汽车/a ul lia href='# '奥迪/a /li lia href='# '道奇/a /li /ul /li lia href=' '手机/a ul lia href='# '小米li lia href='# '华为/a /li /ul /li lia href=' '联系我们/a/li /ul/div。我们可以看到这种方法更好，它保证了结构和性能的完全分离。

2.用javascript实现

meta charset=' UTF-8 ' title document/title style * { margin 33600；padd : 0；list-style:无；文本装饰：无；} # nav { width: 500px高度： 40px；背景# cccmargin: 0 auto} ul { background : # AAA } ul Li { float : left；显示：块；高度： 40px；线高： 40px；padding: 0 20px相对位置：} ul Li : hover { background : # CEA；}ul li ul li{float:无；} ul li ul { position: absolutetop:40pxleft : 0；display:none} ul Li ul Li : hover { background : red；}/style div id='nav' ul lia href='# '主页/a/Li limon mouseover=' show(this)' on mouseout=' hide(this)' a href=' # ' car/a！-键一：在从属于副标题的主标题标签中设置时间执行程序，这个-ullia href=' # ' Audi/a /li lia href='# '道奇/A/Li/ul/Li limouseover=' show(this)' on mouseout=' hide(this)' A href=' # '手机/A ul lia href='# '小米/A/Li lia href=' # '华为/a /li /ul /li lia href='# '联系我们而且结构和行为在这里没有分开(虽然可以在JavaScript中创建dom来分开结构和行为，但是非常麻烦)，这是不推荐的。

3.用jQuery实现

JQuery是一个javascript库。我们可以在jQuery官网下载最新版本的库文件，其中压缩文件是针对产品的，压缩文件方便开发者学习和调试。下载到本机后，库文件需要引用html。因为jQuery本质上也是JavaScript，所以引用方法是：

脚本src='http:路径名'/脚本

用jQuery实现辅助下拉菜单的代码如下：

meta charset=' UTF-8 '标题文档/标题样式* { margin 33600padd : 0；列表样式：无；文本装饰：无；} # nav { width: 500px高度： 40px背景# cccmargin : 0 auto } ul { background : # AAA } ul Li { float : left；显示：块；高度： 40px线高： 40pxpadding: 0 20px相对位置：} ul Li :悬停{背景： # CEA}ul li ul li{float:无；} ul Li ul { position : absolutetop :40 pxleft : 0；显示器：无；} ul Li ul Li :悬停{背景：红色；}/style div id='nav' ul lia href=' '首页/a/li li class='navmenu'a href=' '汽车/a ul lia href='# '奥迪/a /li lia href='# '道奇/a/Li/ul/Li Li“导航菜单”手机/a ul lia href='# '小米/a /li lia href='# '华为/a /li /ul /li lia联系我们/a/li /ul/div！-关键一：引入jQuery库文件-

显然，使用jQuery是非常方便的。

最终的实现效果如下；

即当鼠标划过一级菜单时，会出现相应的二级菜单。

感谢阅读，希望能帮助到大家，谢谢大家对本站支持！