Hướng dẫn trang trí menu đa cấp (menu 3 cấp) cực đẹp cho WordPress – thêm mũi tên, hover vàng gradient chuyên nghiệp.
Chỉ với vài dòng CSS, menu nhiều cấp của bạn sẽ đẹp, chuyên nghiệp và mượt hơn hẳn, đặc biệt khi dùng theme FlatsomeBạn có thể copy toàn bộ đoạn CSS này, “Code CSS trang trí menu dropdown đa cấp cực đẹp cho Flatsome chỉ cần dán vào Customize → Additional CSS hoặc file style.css trong theme con.
/* ======== MENU DROPDOWN CHUẨN FLATSOME ======== */
header#header .nav-dropdown {
display: none; /* chỉ hiện khi hover */
position: absolute;
top: 100%;
left: 0;
background: #fff;
border-radius: 8px;
min-width: 250px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
z-index: 99;
padding: 8px 0;
}
/* Hiện menu khi hover cấp cha */
header#header li:hover > .nav-dropdown {
display: block !important;
}
/* Mục cấp 1 trong dropdown */
header#header .nav-dropdown > li {
position: relative;
list-style: none;
}
header#header .nav-dropdown > li > a {
display: block;
padding: 10px 18px;
color: #333;
font-weight: 500;
background: #fff;
border-radius: 6px;
margin: 2px 8px;
transition: all 0.25s ease;
}
/* Hover nền vàng */
header#header .nav-dropdown > li:hover > a {
background: linear-gradient(90deg, #ffc107, #ffb300);
color: #fff !important;
box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4);
}
/* ======== SUBMENU (CẤP 2) ======== */
header#header .nav-dropdown ul.sub-menu {
position: absolute;
top: 0;
left: 100%;
background: #fff;
border-radius: 8px;
min-width: 230px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
display: none;
padding: 8px 0;
z-index: 999;
}
/* Hover hiển thị submenu cấp 2 */
header#header .nav-dropdown li:hover > ul.sub-menu {
display: block !important;
}
/* Item submenu */
header#header .nav-dropdown ul.sub-menu li a {
padding: 10px 15px;
display: block;
color: #333;
background: #fff;
border-radius: 6px;
margin: 2px 8px;
transition: all 0.25s ease;
}
/* Hover submenu vàng */
header#header .nav-dropdown ul.sub-menu li:hover > a {
background: #ffc107;
color: #fff !important;
}
/* Gọn menu item */
header#header .nav-dropdown li {
border: none;
white-space: normal;
}
/* ==== Hiện mũi tên phải nếu có submenu ==== */
header#header .nav-dropdown li.menu-item-has-children > a {
position: relative;
padding-right: 26px; /* chừa khoảng cho mũi tên */
}
/* Mũi tên phải mặc định */
header#header .nav-dropdown li.menu-item-has-children > a::after {
content: "\f105"; /* icon FontAwesome - mũi tên phải */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
color: #888;
transition: all 0.25s ease;
}
/* Hover đổi mũi tên sang trắng khi nền vàng */
header#header .nav-dropdown li.menu-item-has-children:hover > a::after {
color: #fff;
}
/* Mục đang active hoặc hover có nền vàng */
header#header .nav-dropdown > li:hover > a,
header#header .nav-dropdown > li.current-menu-item > a {
background: linear-gradient(90deg, #ffc107, #ffb300);
color: #fff !important;
box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4);
}
/* Mũi tên cấp 2 nhỏ hơn và lệch nhẹ phải */
header#header .nav-dropdown ul.sub-menu li.menu-item-has-children > a::after {
right: 8px;
font-size: 12px;
}