Estoy creando el navbar de mi proyecto con Bootstrap 3 y tiene varios niveles, pero me muestra errores cuando aparecen los submenus, mostrándolos muy arriba de donde los estoy abriendo.
Ejemplo de como se muestra el navbar en el link
Este es el código del navbar con el que uso las clases dropdown-menu y dropdown-submenu para hacer los diferentes niveles del código.
<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" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Brand</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<!-- Listado para Casos -->
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Edicion de Casos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{route('sistema.index')}}">Listado de Casos</a></li>
<li><a href="{{route('sistema.create')}}">Nuevo Caso</a></li>
<li><a href="{{url('formularios')}}">Contador de Casos Atendidos</a></li>
</ul>
</li>
<!-- Listado para Estados -->
<li>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Edicion de Estados y Casos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{url('formularios')}}">Lista de Estado</a></li>
<li><a href="{{url('formularios/create')}}">Incluir Estado</a></li>
<!-- Listado de Casos -->
<li class="dropdown-submenu pull-right">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Edicion de Tipo de Casos<!--span class="caret"--><!--/span--></a>
<ul class="dropdown-menu">
<li><a href="{{url('tipocaso')}}">Lista de Tipo de Casos</a></li>
<li><a href="{{url('tipocaso/create')}}">Incluir Tipo de Caso</a></li>
</ul>
</li>
</ul>
</li>
<!-- Listado de Ayuda -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Edicion de Tipo de Ayuda<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{{url('tipoayuda')}}">Lista de Tipo de Ayuda</a></li>
<li><a href="{{url('tipoayuda/create')}}">Incluir Tipo de Ayuda</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
Y este es el código de estilos que uso para algunas clases que hace los submenus del navbar pero no me los muestra como deberia, aqui es donde esta la clase .dropdown-submenu y las demas que hacen la jerarquia del menu
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
border-top: 0;
border-bottom: 4px solid #000000;
content: "";
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
.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 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
-webkit-border-radius: 5px 5px 5px 0;
-moz-border-radius: 5px 5px 5px 0;
border-radius: 5px 5px 5px 0;
}
.dropdown-submenu > a:after {
display: block;
float: right;
width: 0;
height: 0;
margin-top: 5px;
margin-right: -105px;
border-color: transparent;
border-left-color: #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
color: #555555;
background-color: #e5e5e5;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.navbar .pull-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}
.navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}
.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
right: 100%;
left: auto;
margin-right: -1px;
margin-left: 0;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.dropdown-submenu
no existe en Bootstrap, ni en la versión 3 ni en la versión 4. Agrega el código CSS personalizado que estás usando para esa clase.