利用js实现下拉菜单效果

小灰灰 2023-07-03 06:23 39阅读 0赞

这个模块在实际开发中也是经常会用到的,所以让我们一起学起来把  
成果图展示  
![在这里插入图片描述][20200203154220909.gif]  
鼠标移动到某一个模块上就会显示下拉菜单,在后续的开发中自己可以根据实际情况添加各种样式和链接,我这里只是做了基础的功能配置

代码展示

-------css-------
     <style>
            *{ 
                margin: 0;
                padding: 0;
            }
            li{ 
                list-style-type: none;
            }
            a{ 
                text-decoration: none;
                color: black;
            }
            .nav{ 
                text-align: center;
                line-height: 50px;
                position: relative;
                margin: 100px auto;
                height: 50px;
                width: 306px;
                border: 1px solid gray;
            }
            .nav li  { 
                width: 100px;
                border: 1px solid gray;
                float: left;
            }
            .nav ul{ 
                display:none;
            }
            .nav ul li { 
                margin-left: -1px;
                border-left: 1px solid goldenrod;
                border-right: 1px solid goldenrod;
                border-bottom: 1px solid goldenrod;
            }
            .nav ul li:hover{ 
                background-color: darkgoldenrod ;
            }
        </style>
    ------------------html----------
        <ul class="nav">
            <li>
                <a href="">手机</a>
                <ul>
                    <li><a href="">华为</a></li>
                    <li><a href="">iPhone</a></li>
                    <li><a href="">oppo</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>
                <ul>
                    <li><a href="">长虹</a></li>
                    <li><a href="">康佳</a></li>
                    <li><a href="">联想</a></li>
                </ul>
            </li>
        </ul>

js部分

后续有什么问题 欢迎大家留言,一起学js 一起进步

[20200203154220909.gif]: https://img-blog.csdnimg.cn/20200203154220909.gif