鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了。

1、原生js

<script>
        // window.onload = function(){
   
            // 获取需要悬浮的对象
             let show = document.getElementById("businessarea");
             // 获取被隐藏的菜单
             let menu = document.getElementById("businessarea-menu");

             // 给show添加鼠标悬停事件
             show.onmouseover = function(){
   
                    menu.style.display = "block";
               }

              show.onmouseout = function(){
   
                    
  • 4
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
下面是一个简单的纯 CSS 导航栏下拉列表的示例: ``` /* 导航栏样式 */ .navbar { background-color: #333; overflow: hidden; } /* 链接样式 */ .navbar a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 下拉列表容器 */ .dropdown { float: left; overflow: hidden; } /* 下拉列表按钮 */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; margin: 0; } /* 鼠标悬浮时下拉列表按钮样式 */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } /* 下拉列表内容 */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* 链接在下拉列表中的样式 */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* 鼠标悬浮在下拉列表中的链接样式 */ .dropdown-content a:hover { background-color: #ddd; } /* 显示下拉列表 */ .dropdown:hover .dropdown-content { display: block; } ``` 使用代码示例: ``` <div class="navbar"> <a href="#">Home</a> <a href="#">About</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> ``` 在上面的示例中,`.navbar` 是整个导航栏的容器,`.dropdown` 是下拉列表的容器,`.dropbtn` 是下拉列表的按钮。使用 `:hover` 选择器来控制鼠标悬浮时的样式。`.dropdown-content` 是下拉列表的内容,使用 `display: none` 属性来隐藏它,使用 `display: block` 属性来显示它。 你可以根据自己的需求修改样式和内容。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值