HTML新手建站求助：添加下拉菜单与右侧注册/登录项布局异常

Hey there! Let's work through your problem step by step—layout bugs are totally normal when you're starting out with HTML/CSS and modifying templates. From what you described, you're trying to add two things: a dropdown menu in your navigation, and right-aligned login/signup links, but elements are misaligned or disappearing. Let's fix this using your existing #cssmenu structure as a base.

1. First: Fix the Right-Aligned Login/Signup Links #

Your existing menu likely uses a block or inline layout, which makes pushing elements to the right tricky. Let's convert the #cssmenu to use Flexbox—it's perfect for aligning navigation items easily.

Updated HTML Structure #

Add a separate container for your auth links inside the main #cssmenu:

<div id="cssmenu">
  <!-- Your existing menu items here -->
  <ul>
    <li><a href="#">Home</a></li>
    <li class="has-dropdown"><a href="#">Services</a>
      <!-- Dropdown menu will go here -->
      <ul class="dropdown">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Development</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
  </ul>

  <!-- New auth links container -->
  <div class="auth-links">
    <a href="#" class="auth-link">Login</a>
    <a href="#" class="auth-link signup">Sign Up</a>
  </div>
</div>

Modified CSS for Alignment #

Update your existing #cssmenu CSS to use Flexbox, and style the auth links:

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu {
  margin: 0;
  padding: 0;
  display: flex; /* Turn into flex container */
  justify-content: space-between; /* Push menu left, auth links right */
  align-items: center; /* Vertically center all items */
  background: #333; /* Add a background to see the nav bar */
  padding: 0 20px;
}

#cssmenu ul {
  display: flex; /* Make menu items horizontal */
  list-style: none;
  margin: 0;
  padding: 0;
}

#cssmenu ul li {
  position: relative; /* Needed for dropdown positioning */
}

#cssmenu ul li a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
}

/* Style the auth links */
.auth-links {
  display: flex;
  gap: 15px;
}

.auth-link {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  font-family: 'Raleway', sans-serif;
}

.auth-link.signup {
  background: #007bff;
  border-radius: 4px;
}

2. Add Working Dropdown Menu #

The key here is using position: absolute for the dropdown so it doesn't break the layout, and hiding it by default until the user hovers over the parent menu item.

Add this CSS to your stylesheet:

/* Dropdown styles */
#cssmenu ul li.has-dropdown .dropdown {
  display: none; /* Hide dropdown by default */
  position: absolute; /* Position relative to parent li */
  top: 100%; /* Place directly below the parent */
  left: 0;
  background: #333;
  min-width: 180px;
}

#cssmenu ul li.has-dropdown:hover .dropdown {
  display: block; /* Show dropdown on hover */
}

#cssmenu ul li.has-dropdown .dropdown li a {
  padding: 12px 20px;
  border-top: 1px solid #444;
}

#cssmenu ul li.has-dropdown .dropdown li:hover a {
  background: #444;
}

Why Your Previous Attempts Failed #

• Alignment issues: Without Flexbox, pushing elements to the right requires messy floats (which cause layout bugs) or incorrect positioning. Flexbox simplifies this completely.
• Missing elements: If your dropdown was using position: relative, it would expand the parent menu and push other elements down, or if you forgot to set display: block on hover, it would stay hidden. Absolute positioning keeps it out of the normal flow so it doesn't disrupt other elements.

Quick Tips for Debugging #

• Right-click on your page and select "Inspect" to open the browser dev tools. You can see exactly where elements are positioned, if they're hidden, or if conflicting CSS is overriding your styles.
• Make sure all your HTML tags are properly closed—unclosed tags often cause elements to disappear or render incorrectly.

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