JS(javascript)API案例:网页导航栏的下拉菜单效果如何实现？当鼠标移动到列表项上时出现下拉菜单！

最新推荐文章于 2024-07-16 08:30:00 发布

Cone0212

最新推荐文章于 2024-07-16 08:30:00 发布

阅读量1.7k

点赞数 7

文章标签： js html5 css3

本文链接：https://blog.csdn.net/Cone0212/article/details/105663465

版权

js实现当鼠标移动到列表项上时出现下拉菜单，离开时便隐藏起来。

知识讲解

css定位（position）和(显示与隐藏)display灵活运用
js知识点mouseover/mouseout运用；熟悉节点操作

效果图
在这里插入图片描述
css部分

<style>
        .nav>li {
   
            position: relative;
            width: 35px;
            height: 20px;
            display: block;
            padding: 0 20px;
            float: left;
        }

        .nav>li a {
   
            text-decoration: none;
            color: black;
        }
        .nav>li ul {
   
            display: none;/*先隐藏*/
            position: absolute;
            top: 20px;
            right: 21px;
        }
        li {