Bootstrap multi level menu issues on mobile - html

Question

My problem is, that when i am looking at the site on mobile, i cant see the submenus.
For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.
<ul class="nav nav-justified">
<li>Alaplap<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu">Intel alaplap
<ul class="dropdown-menu">
<li class="dropdown-submenu">Asus alaplap
<ul class="dropdown-menu">
<li>Asus Z370 alaplap</li>
<li class="dropdown-submenu">Asus Z390 Express alaplap
<ul class="dropdown-menu">
<li>aaaaa</li>
<li>bbbb</li>
</ul>
</li>
</ul>
</li>
<li>MSI alaplap</li>
<li>Gigabyte alaplap</li>
</ul>
</li>
<li>AMD alaplap</li>
</ul>
</li>
<li>SSD meghajtó</li>
<li>Videókártya</li>
<li>Memória</li>
<li>Tápegység</li>
<li>Merevlemez</li>
<li>Monitor</li>
<li>Telefontok<b class="caret"></b>
<ul class="dropdown-menu">
<li>Samsung telefontok</li>
</ul>
</li>
</ul>
You can take a look at my demo site at here: My demo site

Answer 1

This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
}
and here is the actual html to power your menu...feel free to change the css accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Link</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Link 1</a></li>
<li>Lik 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .nav .navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Codepen solution to see it working