JS实现导航菜单中的⼆级下拉菜单的⼏种⽅式最近整理了， JS 实现导航菜单中的⼆级下拉菜单的三种⽅式，便于项⽬中应⽤。
如何实现导航菜单栏中的⼆级下拉菜单？
  我们在淘宝、搜狐等⼤型⽹站上都可以看到使⽤的⼀些⼆级下拉菜单，⽐如下⾯这张图⽚。
但是如何实现类似的图⽚呢？实际上，我们有⾄少三种⽅式来实现，下⾯，我附上代码供⼤家参考。
1.仅使⽤html和css
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*关键⼀：将⼆级菜单设置为display：none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*关键⼆：在划过⼆级菜单从属的⼀级菜单时，设置为display:block;*/
ul li:hover ul{display: block;}
</style>
<div id="nav">
<ul>
<li><a href="">⾸页</a></li>
<li><a href="">汽车</a>
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
导航菜单</li>
<li><a href="">⼿机</a>
<ul>
<li><a href="#">⼩⽶</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href=""></a></li>
</ul>
</div>
  我们可以看到，这种⽅法是⽐较好的，它保证了结构与表现的完全分离。
2.⽤javascript实现
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display:none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
<ul>
<li><a href="#">⾸页</a></li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">汽车</a>
<!-- 关键⼀：在⼆级标题从属的⼀级标题标签内设置时间执⾏程序，this代表的时这个li元素 -->
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">⼿机</a>
<ul>
<li><a href="#">⼩⽶</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href="#"></a></li>
</ul>
</div>
使⽤javascript实现起来较为⿇烦，且这⾥结构和⾏为没有分开（虽然可以试⽤dom在JavaScript中创建使得结构和⾏为分开，但⼗分繁琐），不推荐。
3.⽤jQuery实现
  jQuery是⼀种javascript库，我们可以在jQuery官⽹上下载最新版本的库⽂件，其中压缩的⽂件是⽤于产品的，为压缩的⽂件是便于开发⼈员学习和调试的。下载到本机以后，需要将库⽂件引⽤到html中，由于jQuery本质上也是JavaScript，所以引⽤⽅式为：
    <script src="路径名称"></script>
⽤jQuery实现⼆级下拉菜单的代码如下：
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
<ul>
<li><a href="">⾸页</a></li>
<li class="navmenu"><a href="">汽车</a>
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li class="navmenu"><a href="">⼿机</a>
<ul>
<li><a href="#">⼩⽶</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href=""></a></li>
</ul>
</div>
<!-- 关键⼀：引⼊jQuery库⽂件 -->
　显然，使⽤jQuery是⾮常⽅便的。
最终的实现效果如下；
即当⿏标划过⼀级菜单时，会出现相应的⼆级菜单。
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。