<ul class="main-nav">
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">Cấp 1 <i class="fa fa-angle-down" data-toggle="dropdown"></i></a>
<ul class="dropdown-menu">
<li class="nav-item-lv2">
<a class="nav-link" href="#">Cấp 2</a>
</li>
<li class="nav-item-lv2">
<a class="nav-link" href="#">Cấp 2</a>
</li>
<li class="dropdown-submenu nav-item-lv2">
<a class="nav-link" href="#">Cấp 2 <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="nav-item-lv3">
<a class="nav-link" href="#">Cấp 3</a>
</li>
<li class="nav-item-lv3">
<a class="nav-link" href="#">Cấp 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<style>
.main-nav>.nav-item>.dropdown-menu {
border-radius: 0;
padding: 0;
margin: 0;
width: 250px;
background: #1f366c;
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease 0s;
}
/*khi hover*/
.main-nav>.nav-item:hover>.dropdown-menu {
display: block;
margin-top: 0;
box-shadow: 0px 0px 16px -3px #999;
z-index: 10;
top: 100%;
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
/*cấp 3*/
.main-nav>.nav-item li.dropdown-submenu .dropdown-menu {
left: 100%;
top: -1px;
border-radius: 0;
margin: 0;
background: #1f366c;
padding: 0px;
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease 0s;
}
/*cấp 3 howver*/
.main-nav>.nav-item li.dropdown-submenu:hover>.dropdown-menu {
display: block;
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
</style>