首页导航条下拉菜单html

导航条下拉菜单html

时间: 2023-11-29 21:46:51 浏览: 105

下面是一个简单的HTML导航条下拉菜单的例子，使用了CSS和JavaScript实现： ```html <!DOCTYPE html> <html> <head> <title>导航条下拉菜单</title> <style> /* 隐藏下拉菜单 */ .dropdown { display: none; position: absolute; z-index: 1; } /* 鼠标悬停时显示下拉菜单 */ .dropdown:hover .dropdown-content { display: block; } </style> </head> <body>  <ul> <li><a href="#">首页</a></li> <li class="dropdown"> <a href="#">产品</a>  <div class="dropdown-content"> <a href="#">产品1</a> <a href="#">产品2</a> <a href="#">产品3</a> </div> </li> <li><a href="#">关于我们</a></li> </ul> <script> // 获取所有下拉菜单 var dropdowns = document.getElementsByClassName("dropdown"); // 遍历下拉菜单 for (var i = 0; i < dropdowns.length; i++) { // 添加鼠标悬停事件监听 dropdowns[i].addEventListener("mouseover", function() { // 显示下拉菜单 this.getElementsByClassName("dropdown-content")[0].style.display = "block"; }); dropdowns[i].addEventListener("mouseout", function() { // 隐藏下拉菜单 this.getElementsByClassName("dropdown-content")[0].style.display = "none"; }); } </script> </body> </html> ```

阅读全文