<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administración<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Usuarios</a></li> <li><a href="#">Departamentos</a></li> <li><a href="#">Municipios</a></li> <li class="dropdown-submenu"> <a href="#">Tipos</a> <ul class="dropdown-menu"> <li><a href="#">Tipo A</a></li> <li><a href="#">Tipo B</a></li> <li><a href="#">Tipo C</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div>

.dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -2px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { content: ""; margin-top: 6px; margin-right: -10px; float: right; border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }