-
但如何实现类似的图片呢事实上，我们至少有三种方法来做这件事。接下来，我附上代码以供参考。
1。只使用HTML和CSS
文件
*边距：0；填充：0；列表样式：无；文本装饰：无；}
# NAV {宽度：500px；身高：40px；背景：# CCC；保证金：0汽车；}
UL {背景：# AAA }
ul {浮动：左；显示：块；高度：40px；线高度：40px；padding: 0 20px；位置：相对；}
李：UL悬停{背景：# CEA；}
浮点数：无；}
键：两个菜单设置为显示：无；
UL Li UL {位置：绝对；顶部：40px；左：0；显示：无；}
悬停：背景：红色；}
键：两个跨两级菜单下属菜单，设置为显示块；
悬停：显示：块；}
首页
汽车
奥迪
道奇
移动电话
小米
华为
联系我们
可以看出，这种方法是更好的，它保证了结构和性能的完全分离。
2。使用Jav
文件
*边距：0；填充：0；列表样式：无；文本装饰：无；}
# NAV {宽度：500px；身高：40px；背景：# CCC；保证金：0汽车；}
UL {背景：# AAA }
ul {浮动：左；显示：块；高度：40px；线高度：40px；padding: 0 20px；位置：相对；}
李：UL悬停{背景：# CEA；}
浮点数：无；}
UL Li UL {位置：绝对；顶部：40px；左：0；显示：无；}
悬停：背景：红色；}
首页
汽车
奥迪
道奇
移动电话
小米
华为
联系我们
脚本>
函数显示（LI）{
VaR UL = li.getelementsbytagname（UL）{ 0 }；
键二：查询标签中的UL标签，在对象中，因为两个标签只有一个，所以索引为。
样式；
键 /三：当鼠标越过李时，子元素的UL标签显示块
}
函数隐藏（LI）{
VaR UL = li.getelementsbytagname（UL）{ 0 }；
样式。显示；
键：当鼠标要画四英寸/英寸时，UL显示没有元素。
}
脚本>
Javaｓｃｒｉｐｔ的实现相当麻烦，结构和行为之间没有分离。虽然可以用Javaｓｃｒｉｐｔ创建DOM，但是结构和行为是分开的，但是非常麻烦。
三.通过jQuery实现
jQuery是一个Javaｓｃｒｉｐｔ库。我们可以在jQuery官方网站上下载库文件的最新版本，压缩文件用于产品，压缩文件便于开发人员学习和调试。当您下载该机器时，您需要参考库文件到HTML，因为jQuery本质上是Javaｓｃｒｉｐｔ，因此引用是：
jQuery的两级下拉菜单的代码如下所示：
文件
*边距：0；填充：0；列表样式：无；文本装饰：无；}
# NAV {宽度：500px；身高：40px；背景：# CCC；保证金：0汽车；}
UL {背景：# AAA }
ul {浮动：左；显示：块；高度：40px；线高度：40px；padding: 0 20px；位置：相对；}
李：UL悬停{背景：# CEA；}
浮点数：无；}
UL Li UL {位置：绝对；顶部：40px；左：0；显示：无；}
悬停：背景：红色；}
首页
汽车
奥迪
道奇
移动电话
小米
华为
联系我们
脚本类型文本>
$（函数（）{（））
$（。navmenu）。Mouseover（function（）{）
$（这个）；
}）
}）
关键的两点： / / jquey句法行为的正确使用。
$（函数（）{（））
$（。navmenu）。Mouseout（function（）{）
$（这个）。儿童（）。隐藏（）；
}）
}）
脚本>
显然，使用jQuery非常方便。
最终实现的结果如下。
也就是说，当鼠标越过第一级菜单时，相应的两级菜单就会出现。
以上是一个小批量的js，介绍给你用三种方式实现导航菜单中的两级下拉菜单。希望能对你有所帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。