Cách tạo nút "More" (menu thả xuống) với CSS

Giới thiệu

Nút "More" (thường hiển thị 3 chấm hoặc chữ "More") dùng để gom các hành động ít dùng vào menu thả xuống (dropdown), giúp giao diện gọn gàng. Cách phổ biến nhất là dùng CSS :hover trên container cha để hiện menu con.

Ví dụ hoàn chỉnh - More Button trong Navigation Bar

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>More Button Dropdown</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; margin: 0; }
    nav {
      background: #017575;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .nav-link {
      color: #fff;
      padding: 14px 16px;
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      transition: background 0.2s;
    }
    .nav-link:hover { background: #086b2e; border-radius: 4px; }
    .dropdown {
      position: relative;
    }
    .more-btn {
      background: #040008;
      color: #fff;
      border: none;
      padding: 12px 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      border-radius: 4px;
    }
    .more-btn i { font-size: 12px; }
    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      min-width: 180px;
      background: #017575;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: all 0.25s ease;
      z-index: 100;
    }
    .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .dropdown:hover .more-btn {
      background: #3e8e41;
    }
    .dropdown-item {
      display: block;
      padding: 12px 16px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      transition: background 0.2s;
    }
    .dropdown-item:hover { background: #086b2e; }
    /* Responsive */
    @media (max-width: 600px) {
      nav { justify-content: center; gap: 8px; }
      .nav-link { padding: 10px 12px; font-size: 14px; }
      .more-btn { padding: 10px 14px; font-size: 14px; }
    }
  </style>
</head>
<body>
  <h1 style="text-align:center; padding:20px">More Button trong Navbar</h1>
  <nav>
    <a href="#" class="nav-link">TRANG CHỦ</a>
    <a href="#" class="nav-link">NHÂN VIÊN</a>
    <a href="#" class="nav-link">TUYỂN DỤNG</a>
    <div class="dropdown">
      <button class="more-btn" aria-haspopup="true" aria-expanded="false">
        More <i class="fas fa-chevron-down"></i>
      </button>
      <div class="dropdown-menu" role="menu">
        <a href="#" class="dropdown-item" role="menuitem">Liên hệ</a>
        <a href="#" class="dropdown-item" role="menuitem">Ghé thăm</a>
        <a href="#" class="dropdown-item" role="menuitem">Về chúng tôi</a>
      </div>
    </div>
  </nav>
</body>
</html>

Giải thích cơ chế

• position: relative trên .dropdown + position: absolute trên .dropdown-menu: Menu con định vị theo nút cha.
• :hover trên cha (.dropdown:hover .dropdown-menu): Hiện menu khi di chuột vào nút hoặc menu.
• opacity/visibility/transform: Tạo hiệu ứng mượt mà (animate) thay vì display: none/block (không animate được).
• z-index: Đảm bảo menu nổi trên các nội dung khác.

const btn = document.querySelector('.more-btn');
const menu = document.querySelector('.dropdown-menu');
btn.addEventListener('click', (e) => {
  e.stopPropagation();
  const isOpen = menu.classList.toggle('open');
  btn.setAttribute('aria-expanded', isOpen);
});
document.addEventListener('click', () => {
  menu.classList.remove('open');
  btn.setAttribute('aria-expanded', 'false');
});