HTML导航栏About us下拉菜单多余红色块样式异常修复

问题根源 #

你看到的多余红色块、悬停异常色、下拉对齐问题，都是代码里的结构和样式错误导致的：

• 违反HTML嵌套规则：将<a class="active">写在了<button class="dropbtn">内部，<a>和<button>同属交互元素，不能互相嵌套。浏览器渲染时会自动拆分错误嵌套的标签，导致带深红色（#330000）背景的.active元素脱离按钮，出现在Home按钮旁边形成多余色块。
• 下拉按钮样式不匹配：.dropbtn硬编码了白色文字，但没有同步设置对应深色背景，悬停状态也没有写样式规则，才会出现颜色显示异常。
• 下拉容器配置错误：.dropdown-content没有设置背景色，且设置了width: 100%会铺满整个屏幕宽度，既会透出下层颜色，也会导致选项无法和About us按钮对齐。
• 结构语法错误：<head>标签内混入了无效的<br>标签，导航栏logo后额外加的<br>会打乱浮动布局，同时.topnav容器缺少闭合的</div>标签，进一步引发布局错乱。

具体修复操作 #

1. 删掉按钮内部嵌套的<a class="active">标签，直接把active类加到.dropbtn按钮上，避免标签嵌套错误。
2. 调整.dropbtn样式，匹配active状态的深色背景、白色文字，补充悬停时的样式。
3. 修改.dropdown-content配置：添加浅灰色背景，将宽度从100%改为200px（适配下拉选项宽度），让下拉菜单默认和About us按钮对齐。
4. 清理无效标签：删掉<head>里的<br>、logo后的<br>，补上.topnav缺失的闭合标签，同步适配移动端下的下拉样式。

修复后完整代码 #

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: "Times New Roman", serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #330000;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #330000;
  font: inherit;
  margin: 0;
  cursor: pointer;
}

.dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 200px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.column a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button, .dropdown .dropbtn {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .dropdown-content {
    width: 100%;
    position: relative;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}
</style>
</head>

<body style="background-color:#C0C0C0">
<div class="topnav">
  <img src="D1.jpg" height="70" width="120" align="left">
  <a href="#home">Home</a>
  <div class="dropdown">
    <button class="dropbtn active">About us
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="row">
        <div class="column">
          <a href="#">Who are we?</a>
          <a href="#">What do we do</a>
          <a href="#">Project aims/goals</a>
          <a href="#">History</a>
        </div>
      </div>
    </div>
  </div> 
  <a href="#contact">Contact ✆</a>
  <a href="#about">Gallery 📸</a>
  <a href="#about">Our services</a>
  <a href="#about">Policy</a>
  <a href="#about">Sign Up</a>
     
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>
</body>
</html>

修复后多余红色块会完全消失，下拉菜单会和About us按钮对齐，悬停样式也会和其他导航按钮保持一致，移动端响应式布局也同步做了适配。

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