用JS怎样做鼠标移过显示二级下拉菜单？也就是当当鼠标经过一级菜单时，显示二级菜单，鼠标离开时隐藏。这个效果在很多网站设计中都会看到，小编觉得比较实用，因此分享给大家做个参考，那么接下来我们就看看怎样做吧。

鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。

设计简单的下拉菜单栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>下拉菜单</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   
  }
  a{
   text-decoration: none;
   
  }
  div {
   width: 1200px;
   height: 30px;
   margin: 0px auto;
   background-color: blanchedalmond;
  }
  li {
   list-style: none;
  }
  div li {
   position: relative;
   float: right;
   text-align: center;
   border: 1px solid black;
   line-height: 30px;
   width: 80px;
   height: 30px;
  }
  div ul {
   position: absolute;
   top:30px;
   display: none;
  }
  div ul li{
   
   float: left;
   width: 120px;
   height: 30px;
   background-color: pink;
  }
 </style>
</head>
<body>
 <div>
  <li><a href="#" >邮箱</a>
   <ul>
    <li><a href="#" >免费邮箱</a></li>
    <li><a href="#" >VIP邮箱</a></li>
    <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>
   <ul>
    <li><a href="#" >私信</a></li>
    <li><a href="#" >评论</a></li>
    <li><a href="#" >@我</a></li>
   </ul>
  </li>
  <li ><a href="#" >登录</a></li>

 </div>
 <script>
  var div = document.querySelector('div');
  var lis = div.children;
  for (var i=0;i<lis.length;i++){
   //鼠标经过，出现下拉菜单
   lis[i].onmouseover=function(){
    this.children[1].style.display='block';
   }
   //鼠标离开，隐藏下拉菜单
   lis[i].onmouseout=function(){
    this.children[1].style.display='none';
   }
  }

 </script>
</body>
</html>

    以上就是用JS实现鼠标移过显示二级下拉菜单的具体代码啦，需要的朋友可以参考学习，希望对大家学习JS有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS函数访问外部变量的方法有哪些?

  JS函数访问外部变量的方法有哪些?其实任何在函数中定义的变量都可认为是私有变量，因为是不能在函数外部访问这些变量的，但是我们可以通用JavaScript中子函数访问外部变量，下文给大家分享了三种方法，感兴趣的朋友可以参考。

• Vue中搭建Vuex环境的具体操作步骤是什么

  这篇文章主要为大家介绍了Vue搭建Vuex环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

• JS和Typescript对比是怎样，特点用途是什么

  这篇文章主要介绍了 JavaScript 与 TypeScript之间的联系,JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言。这是一个高级别的、通常是即时编译的、多范式的。TypeScript 是一种强类型、面向对象的编译语言，更多消息内容,需要的朋友可以参考一下下面文章内容

• JS中的数组方法有哪些，基本用法是什么

  这篇文章主要为大家介绍了JS数组中常用的方法技巧，学会了你就在进阶成为大佬的道路上又迈进了一步，希望能够有所帮助，祝大家多多进步

• 微信小程序滚动定位的效果如何实现？

  微信小程序滚动定位的效果如何实现？滚动定位的效果也就是点击小程序导航标签会滚动定位到对应位置，具体实现效果如下。那么这个效果该怎样做呢？接下来我们一起来了解看看实现代码。