how can i modify this code for multi level dropdown
like menu2 > a b c
<li class="nav-item dropdown" >
<a href="#" class="nav-link active dropdown-toggle" id="dropProducts" data-toggle="dropdown" aria-expanded="false">Products </a>
<div class="dropdown-menu square shadow text-center" aria-labelledby="dropProducts" style="border-radius: -0px; width:100%;">
<a class="dropdown-item" href="Menu1">Menu1</a>
<a class="dropdown-item" href="Menu2">Menu2</a>
<a class="dropdown-item" href="Menu3">Menu3</a>
<a class="dropdown-item" href="Menu4">Menu4</a>
</div>
</li>
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
arjunv
on Oct 20, 2021 02:26 AM
2
Dear Bhavesh,
Kindly refer below sample.
HTML
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Products <span class="caret"></span>
</a>
<ul class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu">
<li><a href="#">Menu-1</a></li>
<li><a href="#">Menu-2</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Menu-3</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#">A</a>
<ul class="dropdown-menu">
<li><a href="#">A-1</a></li>
<li><a href="#">A-2</a></li>
</ul>
</li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
</ul>
</div>
CSS
b.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
border-color: transparent;
border-style: solid;
border-left-color: #ccc;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
background-color:cadetblue;
}
Screenshot
