<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container { overflow: hidden; background-color: #333; font-family: Arial; } .container a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; } .container a:hover, .dropdown:hover .dropbtn { background-color: red; } .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; } .show { display: block; } </style> </head> <body> <div class="container"> <a href="#home">主页</a> <a href="#news">新闻</a> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">下拉菜单</button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>导航栏中的下拉菜单</h3> <p>点击按钮显示下拉菜单</p> </body> </html> <script> /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // 点击下拉菜单意外区域隐藏 window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show'); } } } </script>
单个的点击展示下拉菜单比较简单。比如点击右上角的设置按钮会弹出修改密码和退出功能等。
多个的点击式下拉菜单导航：https://www.cnblogs.com/mzzone/p/10994867.html