首页用JavaScript帮我写一个下拉菜单，并写出html代码，适当美化

用JavaScript帮我写一个下拉菜单，并写出html代码，适当美化

时间: 2023-08-28 16:31:16 浏览: 121

好的，下面是一个简单的下拉菜单的HTML和CSS代码，使用JavaScript实现动态效果： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style> /* 下拉菜单样式 */ .dropdown { position: relative; display: inline-block; margin: 10px; } .dropdown-content { display: none; position: absolute; z-index: 1; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; border-radius: 5px; } .dropdown:hover .dropdown-content { display: block; } .dropdown-content a { color: black; padding: 6px 8px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } </style> </head> <body>  <div class="dropdown"> <button>选择菜单</button> <div class="dropdown-content"> <a href="#">菜单项1</a> <a href="#">菜单项2</a> <a href="#">菜单项3</a> </div> </div> <script> // JavaScript代码，实现动态效果 var dropdowns = document.getElementsByClassName("dropdown"); for (var i = 0; i < dropdowns.length; i++) { var button = dropdowns[i].getElementsByTagName("button")[0]; button.addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script> </body> </html> ``` 这段代码会生成一个简单的下拉菜单，包含一个按钮和一个下拉菜单项。当鼠标移动到按钮上时，下拉菜单项会显示出来；当点击按钮时，按钮会切换样式，下拉菜单项也会显示或隐藏。你可以根据需要修改CSS样式，美化下拉菜单的外观。

阅读全文