Listen
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Multilevel <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li><a href="#" rel="noopener noreferrer" tabindex="-1">Level 2.1</a></li>
<li><a href="#" rel="noopener noreferrer" tabindex="-1">Level 2.2</a></li>
</ul>
</li>
</ul>
</li>
@media screen and (min-width: 993px) {
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>a::after {
display: block;
content: "";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 4px 0 4px 4px;
border-left-color: #000;
margin-top: 6px;
margin-right: -10px;
}
.dropdown-submenu>ul.dropdown-menu {
position: absolute;
left: 100%;
top: 0;
margin-left: 5px;
}
jQuery(document).ready(function($) {
$('li.dropdown-submenu a[data-toggle="dropdown"]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$('li.dropdown-submenu').not($(this).parent()).removeClass('open');
$(this).parent().toggleClass('open');
});
});