Submenu with bootstrap - css

Question

I am not so expert in CSS and Bootstrap so I can not build 2 submenus.
Do you have a simple solution for me?
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="index.php">SAI</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 navbar-right">
<li class="dropdown">Titolo <b class="caret"></b>
<ul class="dropdown-menu">
<li>Sottotitolo 1</li>
<li>Sottotitolo 2</li>
<li class="dropdown">Sottotitolo 3 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Nuovo sottotitolo 1</li>
<li>Nuovo sottotitolo 2</li>
<li>Nuovo sottotitolo 3</li>
<li>Nuovo sottotitolo 4</li>
<li>Nuovo sottotitolo 5</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I have found some solutions on this site but they are too complex for me because I also have a few problems with the English language.
Thanks
Giampiero

Answer 1

I have made a small example for you that implements a Bootstrap dropdown with a small custom addition to support a sub-menu that opens on hover:
HTML
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="sub-menu">Sub-menu <span class="glyphicon glyphicon-play"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
CSS (compiled from LESS)
li.sub-menu {
position: relative;
}
li.sub-menu span.glyphicon {
font-size: 0.7em;
}
li.sub-menu:hover .dropdown-menu {
display: block;
top: 0;
left: 100%;
}
You can see this working example here: http://codepen.io/anon/pen/amvavW
You should read the documentation on how to create dropdown-menus with Bootstrap:http://getbootstrap.com/components/#dropdowns
They have practical explanations that comes bundled with some code and working examples.
As much as I remember(correct me if I am wrong): Bootstrap currently does not natively support N-levels dropdown menus, so what you do is kind of use their built-in dropdown implementation and add a bit of custom CSS to get more sub-menu levels working in the way that you desire.
Hope it helps a bit!