学习W3Schools时Dropdown导航栏异常问题求助

问题 #

导航栏中的下拉菜单仅在放在导航栏末尾时正常显示，移至「Store」等其他位置后，整个导航栏消失。

问题根源 #

1. CSS语法错误：.topnav的样式定义末尾多了一个无效的-，导致后续CSS解析异常
2. HTML结构错误：.topnav标签未闭合，浏览器无法正确识别导航栏的边界，移动下拉菜单位置后渲染逻辑混乱
3. 布局对齐问题：下拉菜单容器.dropdown未设置浮动，与使用float:left的导航链接无法在同一行对齐

修复方案 #

1. 删除.topnav样式中多余的-
2. 为.topnav添加闭合标签</div>，确保导航栏、内容区、footer结构独立
3. 给.dropdown添加float:left样式，使其与其他导航链接保持同一行布局

修复后的完整代码 #

<html lang="en">

<head>
  <title>CSS Template</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    /* Style the top navigation bar */
    
    .topnav {
      overflow: hidden;
      background-color: #4682B4;
    }
    /* Style the topnav links */
    
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    /* Change color on hover */
    
    .topnav a:hover {
      background-color: #5F9EA0;
      color: black;
    }
    /* Style the content */
    
    .content {
      background-color: #f1f1f1;
      padding: 30px;
      height: 400px;
    }
    /* Style the footer */
    
    .footer {
      background-color: #4682B4;
      padding: 10px;
    }
    /* Style The Dropdown Button */
    
    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    /* The container <div> - needed to position the dropdown content */
    
    .dropdown {
      position: relative;
      display: inline-block;
      float: left; /* 添加浮动对齐 */
    }
    /* Dropdown Content (Hidden by Default) */
    
    .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;
    }
    /* Links inside the dropdown */
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    /* Change color of dropdown links on hover */
    
    .dropdown-content a:hover {
      background-color: #f1f1f1
    }
    /* Show the dropdown menu on hover */
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    /* Change the background color of the dropdown button when the dropdown content is shown */
    
    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }
  </style>
</head>

<body>
  <div class="topnav">
    <!-- 下拉菜单移至Store之后，布局正常 -->
    <a href="#">Store</a>
    <div class="dropdown">
      <button class="dropbtn">Profile</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <a href="#">Village</a>
    <a href="#">Forum</a>
  </div> <!-- 修复：添加topnav闭合标签 -->

  <div class="content">
    <h2>Home Page</h2>
  </div>

  <div class="footer">
    <p>Footer</p>
  </div>

</body>

</html>

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