Một trong những lỗi khó chịu khi bạn dùng flatsome đó chính là với menu 3 cấp nó sẽ bị hiển thị lỗi ngay. Trong bào viết này PhonuiIT.com sẽ hướng dẫn bạn cách khác phục 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.
Hướng dẫn fix lỗi menu 3 cấp trên Flatsome
Để 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 {
/** chinh mau o day **/ background:#db0000
}
.nav-dropdown-default>li:hover>a,.nav-dropdown .nav-dropdown-col>ul li:hover>a {
color:white
}
.nav-dropdown-default>li:hover {
/** chinh mau o day **/ background:#fbae3c
}
.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 {
border:1px solid #d2d2d2;
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
}Trường hợp các bạn không thích màu hiện tại thì có thể đổi trong phần hướng dẫn code nhé.
Đây là kết quả sau khi bạn thực hiện thao tác trên
Chúc các bạn thực hiện thành công!
