如何实现导航栏Dropdown菜单的三列布局？现有代码调整求助

Got it, let's get that dropdown into a clean three-column layout so it doesn't stretch too long vertically. Your current setup stacks all links because the .dropdown-content uses default block behavior—here's how to adjust it with CSS Grid (my go-to for column layouts) or Flexbox:

Solution with CSS Grid (Recommended) #

Grid makes defining columns straightforward. We'll update the .dropdown-content styles to create three equal-width columns, and adjust the link styling to fit properly:

Updated CSS #

/*Navigation Bar*/
.navbar { 
  overflow: hidden; 
  background-color: #000000; 
  font-family: "Century Gothic"; 
  height: 40px; 
  margin-top: 3px; 
}
.navbar a { 
  float: left; 
  font-size: 15px; 
  color: white; 
  text-align: center; 
  padding: 11px 13px; 
  text-decoration: none; 
  height: 40px; 
}
.active { background-color: #FB724C; }
.dropdown { 
  float: left; 
  overflow: hidden; 
  height: 40px; 
}
.dropdown .dropbtn { 
  font-size: 15px; 
  font-family: "Century Gothic"; 
  border: none; 
  outline: none; 
  color: white; 
  padding: 11px 13px; 
  background-color: inherit; 
  height: 40px; 
}
.navbar a:hover, .dropdown:hover .dropbtn { background-color: #B64321; }
.dropdown-content { 
  display: none; 
  position: absolute; 
  background-color: #f9f9f9; 
  /* Updated: Use Grid for three columns */
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  min-width: 480px; /* Adjust width to fit 3 columns comfortably */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
  z-index: 1;
}
.dropdown-content a { 
  font-size: 13px; 
  font-family: "Century Gothic"; 
  color: black; 
  padding: 11px 13px; 
  text-decoration: none; 
  display: block; 
  text-align: left; 
  /* Optional: Add smooth hover transition */
  transition: background-color 0.2s;
}
.dropdown-content a:hover { background-color: #F4DDD0; }
.dropdown:hover .dropdown-content { 
  display: grid; /* Match display property for consistency */
}

Key Changes: #

• Added grid-template-columns: repeat(3, 1fr) to .dropdown-content to split it into three equal columns automatically.
• Increased min-width to 480px so each column has enough space for your link text (tweak this value if your links are longer/shorter).
• Updated the hover state to use display: grid instead of block to match the dropdown's base display property.

Alternative: Flexbox Solution #

If you prefer Flexbox, you can use this approach instead for the .dropdown-content styles:

.dropdown-content { 
  display: none; 
  position: absolute; 
  background-color: #f9f9f9; 
  display: flex;
  flex-wrap: wrap;
  width: 480px; /* Fixed width to ensure 3 columns */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
  z-index: 1;
}
.dropdown-content a { 
  /* Keep existing link styles */
  font-size: 13px; 
  font-family: "Century Gothic"; 
  color: black; 
  padding: 11px 13px; 
  text-decoration: none; 
  text-align: left; 
  /* New: Assign 1/3 width per link */
  width: 33.33%;
  box-sizing: border-box; /* Ensure padding doesn't break column width */
}
.dropdown:hover .dropdown-content { display: flex; }

Final HTML (Minor Fix Included!) #

Your existing HTML works perfectly with either CSS solution—I just fixed a broken icon class for TVs so it displays correctly:

<div class="navbar">
  <a class="active" href="Index.html">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Tech <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#">Apple <i class="fa fa-apple"></i></a>
      <a href="#">Android <i class="fa fa-android"></i></a>
      <a href="#">Computers <i class="fa fa-desktop"></i></a>
      <a href="#">Drones <i class="fa fa-camera"></i></a>
      <a href="#">Photography <i class="fa fa-camera"></i></a>
      <a href="#">TVs <i class="fa fa-television"></i></a> <!-- Fixed missing icon class -->
    </div>
  </div>
  <a href="Subscription.html">Subcription</a>
  <a href="#news">About Us</a>
  <a href="#news">Contact</a>
  <a style="float:right" href="#Sign Up">Sign Up <i class="fa fa-user-plus" aria-hidden="true"></i></a>
  <a style="float:right" href="#Log In">Log in <i class="fa fa-sign-in" aria-hidden="true"></i></a>
</div>

Just swap out your original CSS with either the Grid or Flexbox version, and your dropdown will now show as a tidy three-column popup instead of a long vertical list.

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