-
如何在导航菜单栏中实现两级下拉菜单
我们可以看到有两级下拉菜单用于淘宝，搜狐等大型网站，如下面的图片。
但如何实现类似的图片呢事实上，我们至少有三种方法来做这件事。接下来，我附上代码以供参考。
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。用Javaｓｃｒｉｐｔ实现
文件
*边距：0；填充：0；列表样式：无；文本装饰：无；}
# NAV {宽度：500px；身高：40px；背景：# CCC；保证金：0汽车；}
UL {背景：# AAA }
ul {浮动：左；显示：块；高度：40px；线高度：40px；padding: 0 20px；位置：相对；}
李：UL悬停{背景：# CEA；}
浮点数：无；}
UL Li UL {位置：绝对；顶部：40px；左：0；显示：无；}
悬停：背景：红色；}
首页
汽车
奥迪
道奇
移动电话
小米
华为
联系我们
Javaｓｃｒｉｐｔ的实现相当麻烦，结构和行为之间没有分离。虽然可以用Javaｓｃｒｉｐｔ创建DOM，但是结构和行为是分开的，但是非常麻烦。
三.通过jQuery实现
jQuery是一个Javaｓｃｒｉｐｔ库。我们可以在jQuery官方网站上下载库文件的最新版本，压缩文件用于产品，压缩文件便于开发人员学习和调试。当您下载该机器时，您需要参考库文件到HTML，因为jQuery本质上是Javaｓｃｒｉｐｔ，因此引用是：
U3000 U3000 U3000 U3000
jQuery的两级下拉菜单的代码如下所示：
文件
*边距：0；填充：0；列表样式：无；文本装饰：无；}
# NAV {宽度：500px；身高：40px；背景：# CCC；保证金：0汽车；}
UL {背景：# AAA }
ul {浮动：左；显示：块；高度：40px；线高度：40px；padding: 0 20px；位置：相对；}
李：UL悬停{背景：# CEA；}
浮点数：无；}
UL Li UL {位置：绝对；顶部：40px；左：0；显示：无；}
悬停：背景：红色；}
首页
汽车
奥迪
道奇
移动电话
小米
华为
联系我们
显然，使用jQuery非常方便。
最终实现的结果如下。
也就是说，当鼠标越过第一级菜单时，相应的两级菜单就会出现。
谢谢你的阅读。我希望你能帮助你。感谢您对本站的支持。