如何修改CSS复刻小米英文官网顶部导航下拉菜单？解决菜单消失问题

Hey there! Let's fix that annoying dropdown issue you're facing with your Xiaomi-style navigation bar. When the dropdown vanishes right as you try to select an item, it's almost always due to tiny gaps breaking the hover state or event handling conflicts. Here's how to resolve it step by step:

1. Close the Hover Gap Between Trigger and Dropdown #

The most common culprit is a small invisible gap between your "International" trigger button and the dropdown menu. When your mouse moves across that gap, the parent element's hover state drops, making the menu disappear.

Fixes: #

• Remove excess spacing: Ensure your trigger and dropdown have no margin that creates a gap. Use top: 100% on the dropdown to stick it directly to the trigger's bottom:

/* Parent trigger container */
.nav-trigger-container {
  position: relative;
  margin-bottom: 0; /* No bottom margin to avoid gaps */
}

/* Dropdown menu */
.international-dropdown {
  position: absolute;
  top: 100%; /* Align perfectly to trigger's bottom */
  left: 0;
  margin-top: 0; /* Remove default margin */
}

• Add a "hover buffer" with a pseudo-element: If you need a tiny visual gap but don't want to break hover, use a pseudo-element to extend the trigger's hover area down into the gap:

.nav-trigger-container::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px; /* Covers the gap area */
  z-index: -1; /* Doesn't block clicks on the dropdown */
}

2. Add a Hover Delay to Prevent Accidental Closure #

Even without gaps, fast mouse movements can trigger the menu to close before you reach an item. A short transition delay gives your cursor time to move into the dropdown:

.international-dropdown {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  transition-delay: 0.15s; /* Wait 150ms before closing */
}

.nav-trigger-container:hover .international-dropdown {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* No delay when opening */
}

You can also disable pointer events on the hidden dropdown to avoid accidental interactions that might close it:

.international-dropdown {
  pointer-events: none; /* Ignore clicks when hidden */
}

.nav-trigger-container:hover .international-dropdown {
  pointer-events: auto; /* Enable clicks when visible */
}

3. Fix JavaScript Event Conflicts #

If you're using JavaScript to toggle the dropdown (instead of pure CSS hover), click events on menu items might bubble up to the trigger and close the menu. Stop the event from propagating:

// Target all dropdown items
document.querySelectorAll('.dropdown-item').forEach(item => {
  item.addEventListener('click', function(e) {
    e.stopPropagation(); // Prevent click from reaching the parent trigger
    // Add your item selection logic here (e.g., redirect, update region)
  });
});

Pro tip: Stick to either CSS hover or JS toggle logic—mixing both can cause unexpected behavior.

4. Copy Xiaomi's Exact Working Setup #

For a foolproof solution, replicate the structure and CSS Xiaomi uses for their International dropdown. Here's a simplified version:

<div class="nav-item">
  <button class="nav-trigger">International</button>
  <ul class="dropdown-menu">
    <li><a href="#" class="dropdown-item">Europe</a></li>
    <li><a href="#" class="dropdown-item">North America</a></li>
    <li><a href="#" class="dropdown-item">Asia Pacific</a></li>
  </ul>
</div>

.nav-item {
  position: relative;
  display: inline-block;
}

.nav-trigger {
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 2px); /* Tiny visual gap */
  left: 0;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* Pseudo-element covers the tiny gap */
.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
}

.dropdown-item {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

This setup uses a pseudo-element to bridge the small visual gap, plus smooth transitions to prevent accidental closures—just like Xiaomi's official menu.

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