Multi level DropDown Menu using Bootstrap and CSS

Bhavesh23
 
on Oct 20, 2021 12:45 AM
322 Views

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

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