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.⽤javasc
<!DOCTYPE htm>
<html lang="en">
<head >
<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>
jquery是什么有什么作用
<li><a href="#">⼩⽶</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href="#"></a></li>
</ul>
</div>
script>
function show(li){
var ElementsByTagName("ul")[0];
// 关建⼆：在li这个对象内查询标签名为ul的标签，由于⼆级标签只有⼀个，所以索引为0即可。
ul.style.display="block";
// 关键三：当⿏标划过li时，其⼦元素ul标签的display为block
}
function hide(li){
var ElementsByTagName("ul")[0];
ul.style.display="none";
// 关键四：当⿏标划出li时，其⼦元素ul的display为none
}
/script>
使⽤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库⽂件 -->
script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
})
// 关键⼆：正确使⽤jQuey的语法完成⾏为。
$(function(){
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
})
/script>
　显然，使⽤jQuery是⾮常⽅便的。
最终的实现效果如下；
即当⿏标划过⼀级菜单时，会出现相应的⼆级菜单。
以上所述是⼩编给⼤家介绍的JS中⽤三种⽅式实现导航菜单中的⼆级下拉菜单，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

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