如何用HTML/CSS/JS实现点击三点图标弹出白色背景下拉列表？

Got it, let's get that ellipsis dropdown working exactly how you want it! First, we'll tweak your existing HTML to add the dropdown container, then style it with CSS, and finally add the JavaScript logic for the click behavior.

Step 1: Update Your HTML #

We need to add a hidden dropdown menu right next to your ellipsis icon. Here's the adjusted code:

<div class="nav-top-searchbar">
  <form>
    <span class="fa fa-search searchicon" aria-hidden="true"></span>
    <input type="text" name="search">
    <img src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis" alt="More options">
    <!-- New dropdown container -->
    <div class="ellipsis-dropdown" id="ellipsisDropdown">
      <ul>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Help & Support</a></li>
        <li><a href="#">Sign Out</a></li>
      </ul>
    </div>
  </form>
</div>

Step 2: Add CSS for Styling & Visibility #

This CSS will make the dropdown hidden by default, position it correctly, and give it that clean white background with a subtle shadow:

/* Make the ellipsis look clickable */
#ellipsis {
  cursor: pointer;
  width: 24px; /* Adjust size to match your design */
  height: 24px;
  margin-left: 8px;
}

/* Parent form needs relative positioning to anchor the dropdown */
.nav-top-searchbar form {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dropdown container - hidden by default */
.ellipsis-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  width: 180px;
  display: none;
  z-index: 1000; /* Ensure dropdown stays above other elements */
}

/* Style dropdown list items */
.ellipsis-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ellipsis-dropdown li {
  padding: 10px 16px;
}

.ellipsis-dropdown li:hover {
  background-color: #f0f0f0; /* Subtle hover effect */
}

.ellipsis-dropdown a {
  text-decoration: none;
  color: #333;
  display: block;
}

Step 3: Add JavaScript for Click Behavior #

This script will toggle the dropdown when you click the ellipsis, and close it when you click anywhere else on the page:

const ellipsisIcon = document.getElementById('ellipsis');
const dropdown = document.getElementById('ellipsisDropdown');

// Toggle dropdown visibility on ellipsis click
ellipsisIcon.addEventListener('click', (e) => {
  e.stopPropagation(); // Prevent click from triggering the outside close
  dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
});

// Close dropdown when clicking outside of it
document.addEventListener('click', () => {
  dropdown.style.display = 'none';
});

// Keep dropdown open if clicking inside it
dropdown.addEventListener('click', (e) => {
  e.stopPropagation();
});

Quick Tips to Match Your Screenshot #

• Adjust the width, padding, and border-radius values in the CSS to match the exact dimensions of your dropdown.
• Swap out the list items in the HTML for the actual options you need in your interface.
• Tweak the box-shadow intensity to match the shadow style from your screenshot.

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