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

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:

.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


Bài viết liên quan

Tính năng tự động cập nhật trong WordPress rất tốt giúp bảo mật hơn, được cập nhật ngay
Thiết kế website bán hàng bằng plugin woocommerce hiện này rất phổ biến, nó cung cấp đầy đủ
Làm website wordpress bán hàng sử dụng plugin Woocommerce được đa số các bạn lựa chọn bởi nó
Trong vài năm gần đây, lĩnh vực bất động sản đã “bùng nổ”, minh chứng bằng rất nhiều