下拉框菜单相信大家都比较熟悉，那么鼠标经过显示下拉框效果是怎么做的呢？这篇文章就给大家分享一下用JavaScript实现鼠标经过显示下拉框代码，感兴趣的朋友可以参考，实现效果和代码如下。

    代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            margin: 100px auto;
            width: 500px;
        }
        
        .nav>li {
            float: left;
        }
        
        li {
            list-style: none;
        }
        
        a {
            display: block;
            text-decoration: none;
            color: gray;
            height: 40px;
            width: 100px;
            text-align: center;
            line-height: 40px;
            box-sizing: border-box;
        }
        
        .nav>li>a {
            color: black;
        }
        
        .nav>li>a:hover {
            background-color: lightgray;
        }
        
        .nav>li>ul>li>a {
            /* display: none; */
            border: 1px solid orange;
            border-top: none;
        }
        
        .nav>li>ul>li>a:hover {
            background-color: lightyellow;
        }
        
        .nav>li>ul {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="nav" id=nav>
        <li>
            <a href="#" >新浪</a>
            <ul>
                <li><a href="#">新闻</a> </li>
                <li><a href="#">体育</a> </li>
                <li><a href="#">快讯</a> </li>
                <li><a href="#">生活</a> </li>
                <li><a href="#">微博</a> </li>
            </ul>
        </li>
        <li>
            <a href="#" >新浪</a>
            <ul>
                <li><a href="#">新闻1</a> </li>
                <li><a href="#">体育1</a> </li>
                <li><a href="#">快讯1</a> </li>
                <li><a href="#">生活1</a> </li>
                <li><a href="#">微博1</a> </li>
            </ul>
        </li>

        <li>
            <a href="#" >新浪</a>
            <ul>
                <li><a href="#">新闻2</a> </li>
                <li><a href="#">体育2</a> </li>
                <li><a href="#">快讯2</a> </li>
                <li><a href="#">生活2</a> </li>
                <li><a href="#">微博2</a> </li>
            </ul>
        </li>


    </ul>

    <script>
        var heads = document.querySelectorAll('.nav>li');
        for (var i = 0; i < heads.length; i++) {
            heads[i].onmouseover = function() {
                this.children[1].style.display = "block";
            }
            heads[i].onmouseout = function() {
                this.children[1].style.display = "none";

            }
        }
    </script>
</body>

</html>

    以上就是JS实现鼠标经过显示下拉框效果的介绍，希望本文对大家学习JavaScript有帮助，想要了解更多js实现下拉框菜单的效果，大家可以关注群英网络其它相关文章。

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

猜你喜欢

• 用JS怎样做简单的网页留言板功能？

  这篇文章主要给大家分享用JS做简单的网页留言板功能的内容，留言板的功能还是比较实用的，很多场景都能用到，本文有实现代码供大家参考，感兴趣的朋友可以了解看看，希望大家阅读完这篇文章能有所收获，下面我们一起来学习一下吧。

• 实现自己的原生JS路由的方法操作是什么

  当你想到路由时，通常会想到类似react之类的库。但实际上，这些库和框架仍然使用vanillaJavaScript。那么该怎么实现呢？

• JS怎样获取文件后缀来判断类型，方法是什么

  JS 获取文件后缀，判断文件类型(比如是否为图片格式。有时候我们需要通过文件名或者路径，得到该文件的后缀名（扩展名）

• 怎样使用useState实现修改表格数据的需求

  目录如何实现在当前表格直接更改数据需求效果如下具体做法useState修改对象的字段如何实现在当前表格直接更改数据需求用户点击修改按钮时直接在弹出框的当前页面内直接再次修改点击行相关信息：效果如下点击修改当事人信息时，直接将当前改为输入框，并将信息展示，同时操作栏内的内容变为保存和取消;具体做法我这里是使用的antd组

• JS中数组Array方法常用的有哪些，功能是什么

  JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象,下面这篇文章主要给大家介绍了关于JavaScript数组Array的一些常用方法,需要的朋友可以参考下