how to make submenu dropdown visible outside parent dropdown - html

Question

Currently I'm making multilevel dropdown using bootstrap 3. I expect the child menu is visible outside the parent dropdown menu. This is what I've done
HTML, CSS and JavaScript:
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.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;
border-radius: 0 6px 6px 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">Test</li>
<li class="dropdown">
Test 1<b class="caret"></b>
<ul role="menu" class="dropdown-menu col-xs-2" style="height: auto; max-height: 1000px; overflow-x: hidden;">
<li></li>
<li>Anting</li>
<li>Cincin</li>
<li>Diamond Jewelry</li>
<li>Dinar</li>
<li class="dropdown-submenu">
Fine Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Toko abc</a></li>
<li><a tabindex="-1" href="#">Toko cde</a></li>
</ul>
</li>
<li>Gelang</li>
<li>Kalung</li>
<li>Liontin</li>
<li>Pin & Accessories</li>
</ul>
</li>
<li class="dropdown">Test 2</li>
</ul>
</nav>
and the result is look like this. the child menu is half hidden. I've been searching for the solution and none of them solve my problem. Thanks in advance

Answer 1

You use position: absolute; to your submenu and you can use toggleClass() to show and hide the menu. check below code.
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggleClass('show');
e.stopPropagation();
e.preventDefault();
});
});
.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;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu{
position:relative;
}
.dropdown-menu.submenu{
display:none;
}
.dropdown-menu.submenu.show {
position: absolute;
top: 5px;
left: 50px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">Test</li>
<li class="dropdown">
Test 1<b class="caret"></b>
<ul role="menu" class="dropdown-menu col-xs-2" style="height: auto; max-height: 1000px; overflow-x: hidden;">
<li></li>
<li>Anting</li>
<li>Cincin</li>
<li>Diamond Jewelry</li>
<li>Dinar</li>
<li class="dropdown-submenu">
Fine Gold<span class="caret"></span>
<ul class="dropdown-menu submenu">
<li><a tabindex="-1" href="#">Toko abc</a></li>
<li><a tabindex="-1" href="#">Toko cde</a></li>
</ul>
</li>
<li>Gelang</li>
<li>Kalung</li>
<li>Liontin</li>
<li>Pin & Accessories</li>
</ul>
</li>
<li class="dropdown">Test 2</li>
</ul>
</nav>