仅用CSS实现简易下拉菜单：样式还原问题求助

Hey there! I get that frustration when your dropdown doesn’t look or behave like you want it to—let’s fix this together with plain CSS and vanilla JS, no frameworks needed.

First, let’s clean up your existing HTML a bit for readability:

<div id="menu">
  <a href="#" class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </a>
  <ul id="dropdown-menu">
    <li class="dropdown-item">
      <a href="#about">About...</a>
    </li>
    <!-- Add more menu items here later if needed -->
  </ul>
</div>

Now, let’s add the CSS to style the hamburger toggle and dropdown exactly how you’d expect. I’ve included comments to explain key parts:

/* Base menu container - position relative so dropdown can anchor to it */
#menu {
  position: relative;
  display: inline-block;
}

/* Style the hamburger toggle button */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  text-decoration: none;
  cursor: pointer;
}

/* Style each hamburger line */
.menu-toggle span {
  width: 24px;
  height: 2px;
  background-color: #333; /* Adjust color to match your design */
  transition: all 0.3s ease; /* Smooth animation when toggling */
}

/* Hide dropdown by default */
#dropdown-menu {
  position: absolute;
  top: 100%; /* Position directly below the toggle */
  right: 0; /* Align to the right of the menu (switch to left if needed) */
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background-color: #fff; /* Match your desired background */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Subtle shadow for depth */
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease; /* Smooth reveal animation */
}

/* Show dropdown when the menu has an 'active' class */
#menu.active #dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Style dropdown items */
.dropdown-item a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333; /* Adjust text color */
}

/* Hover effect for dropdown items */
.dropdown-item a:hover {
  background-color: #f5f5f5; /* Light gray hover background */
}

/* Optional: Animate hamburger into an 'X' when active */
#menu.active .menu-toggle span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#menu.active .menu-toggle span:nth-child(2) {
  opacity: 0;
}
#menu.active .menu-toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

Then add a little vanilla JavaScript to handle the toggle click (no jQuery required!):

// Grab elements from the DOM
const menu = document.getElementById('menu');
const menuToggle = document.querySelector('.menu-toggle');

// Toggle the 'active' class when clicking the hamburger
menuToggle.addEventListener('click', function(e) {
  e.preventDefault(); // Stop the link from jumping to the top
  menu.classList.toggle('active');
});

// Optional: Close dropdown when clicking outside of it
document.addEventListener('click', function(e) {
  if (!menu.contains(e.target)) {
    menu.classList.remove('active');
  }
});

Quick Tips for Tweaking: #

• Adjust colors, sizes, shadows, and positioning values to match your exact expected design.
• The transition properties make the dropdown reveal and hamburger animation feel polished—you can tweak the 0.3s value to make animations faster or slower.
• The click-outside handler is optional but adds a natural user experience, since people expect to close dropdowns by clicking elsewhere.

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