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；}/stylediv id='nav'ullia href='主页/a/lilia href=' car/aullia href='# '奥迪/a /lilia href='# '道奇/a /li/ul/lilia href=' '手机/aullia href=' # '小米华为/a /li/ul/lilia href=' '联系我们/a/li/ul/div。我们可以看到这种方法是比较好的，它保证了结构和性能的完全分离。

2.使用javasc

！DOCTYPE htmhtml lang=' en ' head meta charset=' UTF-8 ' title document/title style * { margin :0；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；}/stylediv id='nav'ullia href='# '主页/a/lilionmouseover=' show(this)' onmouseout=' hide(this)' a href=' # ' car/a！-关键一：在从属于副标题的主标题标签中设置时间执行程序，这代表这个li元素-ullia href=' # ' Audi/a/Lilia href=' # ' dodge/a/Li/ul/lilionmouseover=' show(This)' onmouseout=' hide(This)' a href=' # '手机/aullia href=' # ' Lilia href=' # ' Huawei/a/Li/ul/Lilia href=' # '联系我们/a/Li/ul/ulgetelementsbyname(' ul ')[0]；//关健儿：查询对象li中名为ul的标签。因为只有一个辅助标签，所以索引为0。ul . style . display=' block '；//键3:当鼠标经过li时，其子元素ul标签的显示为block } function hide(Li){ var ul=Li。getelementsbyname(' ul ')[0]；ul . style . display=' none '；//键四：当鼠标绘制li时，其子元素ul的显示为none。}/script用javascript实现比较麻烦，这里结构和行为没有分开(虽然可以用JavaScript创建dom来分开结构和行为，但是很麻烦)，不推荐使用。

3.用jQuery实现

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

脚本src=' http : pathname '/脚本用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 :悬停{背景：红色；}/stylediv id='nav'ullia href=' '首页/a/lili class='navmenu'a href=' '汽车/aullia href='# '奥迪/a /lilia href='# '道奇/a/Li/ul/Lili class='导航菜单' a href=' '手机/aullia href='# '小米/a /lilia href='# '华为/a /li/ul/lilia联系我们/a/li/ul/div！-关键一：引入jQuery库文件-脚本类型=' text/JavaScript ' $(function(){ $(').导航菜单').mouseover(函数(){$(this)).儿童(' ul ').show()；})})//关键二：正确使用jQuey的语法完成行为$(function(){$(').导航菜单').mouseout(函数(){$(此)).儿童(' ul ').hide()；})})/脚本显然，使用jQuery是非常方便的。

最终的实现效果如下；

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

以上所述是小编给大家介绍的射流研究…中用三种方式实现导航菜单中的二级下拉菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！