3-level vertical drop-down menu

1. REHAN 24.02.2026 / 22:14
3-level vertical drop-down menu
A three-level drop-down vertical menu in Bootstrap 3, complete with a ready-made HTML snippet for installation on your website.
* BootstrapTheme Code Snippet.

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<style>
 .dropdown-submenu {
 position: relative;
 }
 
 .dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px 6px;
 border-radius: 0 6px 6px 6px;
 }
 
 .dropdown-submenu:hover>.dropdown-menu {
 display: block;
 }
 
 .dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #cccccc;
 margin-top: 5px;
 margin-right: -10px;
 }
 
 .dropdown-submenu:hover>a:after {
 border-left-color: #ffffff;
 }
 
 .dropdown-submenu.pull-left {
 float: none;
 }
 
 .dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
 }
</style>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li class="dropdown-submenu">
 <a tabindex="-1" href="#">More options</a>
 <ul class="dropdown-menu">
 <li><a tabindex="-1" href="#">Second level</a></li>
 <li class="dropdown-submenu">
 <a href="#">More..</a>
 <ul class="dropdown-menu">
 <li><a href="#">3rd level</a></li>
 <li><a href="#">3rd level</a></li>
 </ul>
 </li>
 <li><a href="#">Second level</a></li>
 <li><a href="#">Second level</a></li>
 </ul>
 </li>
</ul>

URL: https://pakwap.com/topics/471