Code css fix lỗi menu 3 cấp trên theme Flatsome

Khi tạo menu 3 cấp trên theme Flatsome mà danh mục không đồng đều sẽ bị lỗi hiển thị rất xấu, làm mất thẩm mỹ của web, để fix lỗi này các bạn chỉ…

Code css fix lỗi menu 3 cấp trên theme Flatsome

Khi tạo menu 3 cấp trên theme Flatsome mà danh mục không đồng đều sẽ bị lỗi hiển thị rất xấu, làm mất thẩm mỹ của web, để fix lỗi này các bạn chỉ cầm thêm đoạn code css sau:

CSS
.nav-dropdown>li.nav-dropdown-col {
	display:block;
}
.nav-dropdown {
	border:1px solid #ddd;
	padding:0;
}
.nav-dropdown .nav-dropdown-col>a,.nav-dropdown li a {
	font-weight:normal !important;
	text-transform:none !important;
	font-size:15px;
	font-weight:500;
}
.nav-dropdown .nav-dropdown-col>ul li:hover {
	background:#053484; /* đổi màu tại đây */
}
.nav-dropdown-default>li:hover>a,.nav-dropdown .nav-dropdown-col>ul li:hover>a {
	color:white;
}
.nav-dropdown-default>li:hover {
	background:#053484; /* đổi màu tại đây */
}
.nav-dropdown-default>li>a {
	border-bottom:0 !important;
}
.nav-dropdown-has-arrow li.has-dropdown:before {
	border-width:10px;
	margin-left:-10px;
}
.nav-dropdown .nav-dropdown-col>ul {
	margin-top:-40px;
	box-shadow:2px 2px 5px #828282;
	display:none;
	position:absolute;
	left:100%;
	z-index:9;
	background:white;
	min-width:240px;
}
.nav-dropdown>li.nav-dropdown-col {
	width:100%;
	border-right:0;
}
.nav-dropdown .nav-dropdown-col>ul li a {
	padding:10px;
	text-transform:none;
	color:black;
}
.header-nav li.nav-dropdown-col:hover>ul {
	display: block !important;
}

Chúc các bạn thành công

Cần website chuẩn SEO cho doanh nghiệp?

CVM thiết kế website WordPress trọn gói, bàn giao mã nguồn, hỗ trợ lâu dài.

Tác giả

Đội ngũ CVM

Đội ngũ CVM làm thiết kế website WordPress, quảng cáo Google Ads và chăm sóc hệ thống cho doanh nghiệp Việt. Các bài viết được viết từ kinh nghiệm triển khai thực tế cho khách hàng.

Về CVM