求助：如何在W3Schools的Mega Menu中添加新链接按钮或菜单

Got it, let's walk through how to add another mega menu or standalone link button—either inside an existing dropdown or right next to it in the main navigation bar. I'll break it down into two common scenarios with code snippets you can plug right into the "Try It Yourself" editor.

Scenario 1: Add a Second Mega Menu Column or Button Inside an Existing Dropdown #

This works if you want extra content (another category of links or a call-to-action button) alongside the existing dropdown links.

Step 1: Modify the HTML Structure #

In the existing .dropdown-content container, add another .column for a second mega menu, or a dedicated container for a button. Here's how that looks:

<div class="dropdown-content">
  <div class="mega-menu">
    <!-- Original Mega Menu Column -->
    <div class="column">
      <h3>Category 1</h3>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
    <!-- New Mega Menu Column -->
    <div class="column">
      <h3>Category 2</h3>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
    </div>
    <!-- New Standalone Button Container -->
    <div class="action-button-wrapper">
      <a href="#" class="special-button">Take Action</a>
    </div>
  </div>
</div>

Step 2: Update the CSS #

Add styles to make the new column and button fit properly. Paste this into the CSS section:

/* Ensure the mega menu has enough width for all columns/buttons */
.mega-menu {
  width: 1000px; /* Adjust based on your content */
}

/* Style the new action button wrapper */
.action-button-wrapper {
  float: left;
  width: 20%;
  padding: 15px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.special-button {
  background-color: #2196F3;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

.special-button:hover {
  background-color: #1976D2;
}

Scenario 2: Add a New Mega Menu or Button to the Main Navigation Bar #

If you want a separate dropdown menu or standalone button right next to the original mega menu in the top navbar:

Step 1: Modify the HTML Navigation #

Add a new <li> element to the main navbar—either another dropdown or a regular button:

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <!-- Original Mega Menu -->
  <li class="dropdown">
    <a href="#" class="dropbtn">Original Mega Menu</a>
    <div class="dropdown-content">
      <!-- Original mega menu content here -->
    </div>
  </li>
  <!-- New Mega Menu Dropdown -->
  <li class="dropdown">
    <a href="#" class="dropbtn">New Mega Menu</a>
    <div class="dropdown-content">
      <div class="mega-menu">
        <div class="column">
          <h3>New Category</h3>
          <a href="#">New Link 1</a>
          <a href="#">New Link 2</a>
        </div>
      </div>
    </div>
  </li>
  <!-- Standalone Navigation Button -->
  <li><a href="#" class="navbar-button">Contact Us</a></li>
</ul>

Step 2: Add CSS for the Standalone Button (If Needed) #

If you added a standalone button, style it to stand out:

.navbar-button {
  background-color: #f44336;
  color: white;
  padding: 14px 20px;
  margin: 0 5px;
  border-radius: 4px;
}

.navbar-button:hover {
  background-color: #da190b;
}

Just paste these changes into the "Try It Yourself" editor, tweak colors/sizes to match your design, and you're good to go!

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