Hiệu ứng Submenu Đẹp Cho Theme Flatsome – Mềm Mại, Sang Trọng, Dễ Tùy Biến

Flatsome là theme WordPress rất mạnh mẽ, tuy nhiên menu mặc định của nó đôi khi khá “phẳng” và thiếu điểm nhấn.
Với một chút CSS tinh chỉnh, bạn có thể khiến submenu hiển thị mượt mà, có hiệu ứng chuyển động tự nhiên và highlight màu chủ đạo khi rê chuột vào. Điều này giúp trải nghiệm người dùng tốt hơn, đồng thời tăng độ tin cậy và thẩm mỹ cho website.

Bạn đang muốn làm menu website Flatsome của mình trông chuyên nghiệp và có hiệu ứng mượt mà hơn?
Đoạn CSS dưới đây sẽ giúp bạn tạo một hiệu ứng submenu thả xuống (dropdown) cực kỳ tinh tế – có bo góc, đổ bóng, hiệu ứng trượt và highlight màu chủ đạo khi rê chuột vào từng mục.

💡 Mục tiêu:

• Menu con hiện ra nhẹ nhàng, không bị giật.

• Có mũi nhọn nhỏ tạo cảm giác tự nhiên.

🧩 Code CSS Hoàn Chỉnh:

Dán đoạn code dưới đây vào Appearance → Customize → Additional CSS hoặc style.css trong child theme của bạn:

/* ======= SUBMENU TÙY CHỈNH ======= */
header#header .nav-dropdown {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 8px 0;
  min-width: 220px;
  border: 1px solid #eee;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  visibility: hidden;
}

/* Hiện submenu khi hover */
header#header li:hover > .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Mục trong submenu */
header#header .nav-dropdown > li {
  list-style: none;
}

header#header .nav-dropdown > li > a {
  display: block;
  padding: 10px 18px;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  border-left: 3px solid transparent;
}

/* Hiệu ứng hover: đổi màu chữ + gạch màu bên trái + nền nhạt */
header#header .nav-dropdown > li > a:hover {
  color: #c0392b; /* Màu chủ đạo – có thể đổi */
  background: #f9f9f9;
  border-left: 3px solid #c0392b;
  transform: translateX(4px);
}


/* ====== FIX MENU TRÀN FLATSOME ====== */

/* Giữ menu con trong khung */
.header-nav .nav-dropdown {
  max-width: 100vw; /* không tràn ra ngoài màn hình */
  overflow-x: auto; /* nếu rộng quá thì cho scroll ngang */
  left: 0 !important; /* canh sát bên trái header */
  right: auto;
  transform: none !important;
}

/* Căn lại vị trí dropdown chính */
.header-nav li.has-dropdown:hover > .nav-dropdown {
  left: 0;
  right: auto;
}

/* Nếu là mega menu có nhiều cột */
.header-nav .nav-dropdown.nav-dropdown-mega {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 0;
  box-sizing: border-box;
  padding: 15px 30px;
  overflow: hidden;
}

/* Responsive cho mobile */
@media (max-width: 991px) {
  .header-nav .nav-dropdown,
  .header-nav .nav-dropdown.nav-dropdown-mega {
    position: static !important;
    width: 100% !important;
    box-shadow: none;
  }
}

🎯 Cách Dùng:

• Chèn đoạn CSS trên vào file style.css của child theme hoặc mục Custom CSS trong Customizer.

• Bạn có thể thay màu chủ đạo (#c0392b) bằng màu thương hiệu của bạn như:

  • Xanh dương: #1677d8

  • Cam: #ff6600

  • Xanh lá: #12997b

💎 Kết quả:

Submenu sẽ trượt nhẹ xuống, có bóng đổ và hiệu ứng sáng nổi bật khi hover, giúp giao diện của bạn trở nên chuyên nghiệp và hiện đại hơn — đặc biệt phù hợp với các website thương mại điện tử, công ty, agency, hoặc thời trang dùng theme Flatsome.

Nếu bạn thấy đoạn CSS này hữu ích, hãy chia sẻ bài viết cho bạn bè hoặc đồng nghiệp đang làm web bằng Flatsome nhé 💙
Mỗi dòng code nhỏ đều có thể giúp website của bạn đẹp và khác biệt hơn mỗi ngày.