HTML开发：如何将drop down menu嵌入navigation bar？

嘿，我看你在给导航栏加下拉菜单的时候卡壳了，咱们来一步步把这个问题搞定！

先看你现有代码里的几个关键问题：

• 缺少下拉菜单容器.dropdown-content的基础样式，它默认应该隐藏，并且要正确定位在按钮下方
• 导航栏里的<h1>是块级元素，会占满整行，导致你的下拉菜单按钮被挤到下一行
• 还没实现切换下拉菜单显示/隐藏的myFunction()函数

下面是修正后的完整代码，我会一步步解释改动点：

<!DOCTYPE html>
<html>
<head>
<style>
.topnav {
  overflow: hidden;
  padding: 6px 0;
  margin: 0;
  /* 用flex布局让导航栏内的元素横向排列 */
  display: flex;
  align-items: center;
  gap: 20px; /* 给元素之间加间距 */
  background-color: #2c3e50; /* 给导航栏加个背景，方便看布局 */
}

.topnav h1 {
  text-align: center;
  font-size: 22px;
  color: #FFFFFF;
  margin: 0;
  /* 让h1占满剩余空间，把下拉菜单推到右边 */
  flex: 1;
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

/* 补全下拉菜单容器的基础样式 */
.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 {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block; /* 让链接占满整行 */
}

/* 鼠标悬停在链接上时改变背景色 */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.show {
  display: block;
}
</style>
</head>
<body>

<div class="topnav">
  <h1>Home</h1>
  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Menu</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#content">Content</a>
      <a href="#about">About</a> <!-- 加个示例链接 -->
    </div>
  </div>
</div>

<script>
// 实现切换下拉菜单的函数
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 点击页面其他地方时关闭下拉菜单，提升体验
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

关键改动说明： #

• 导航栏布局：给.topnav添加了display: flex，让里面的<h1>和下拉菜单按钮横向排列；用flex:1让<h1>占满剩余空间，把下拉菜单固定在导航栏右侧
• 下拉菜单样式：补全了.dropdown-content的样式，设置display: none默认隐藏，position: absolute让它相对于父容器.dropdown定位，不会打乱导航栏的原有布局
• 交互逻辑：实现了myFunction()来切换.show类控制菜单显示/隐藏，还加了点击页面其他区域自动关闭下拉菜单的逻辑，让交互更流畅

现在你可以把这段代码替换你现有的部分，就能看到下拉菜单正常嵌入导航栏里啦！

内容的提问来源于stack exchange，提问作者fordkuppp