3

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

https://ibb.co/w4cFr7r

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;
    }

2
  • 2
    La clase .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. Commented el 19 oct. 2019 a las 22:17
  • alli esta el codigo que uso para los submenus
    – mnsperez97
    Commented el 21 oct. 2019 a las 18:33

1 respuesta 1

9

En palabras del creador de Bootstrap:

(...) Los submenús no tienen mucho lugar en la web en este momento, especialmente en la web móvil

Esta es una de las razones por las cuales se eliminó esta característica a partir de la versión 3, pues recordemos que Bootstrap es mobile-first.

Sin embargo, es claro que muchos desarrolladores web se ven obligados a usarlos en sus menús, en este caso, con incluir las clases CSS adecuadas sería suficiente.

.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;
}

.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;
}

.navbar-nav li:hover>ul.dropdown-menu {
  display: block;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
}

.girar {
  transform: rotate(270deg);
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<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">
              <a data-toggle="dropdown" class="dropdown-item dropdown-toggle" href="#">Edicion de Tipo de Casos<span class="caret girar"></span></a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="{{url('tipocaso')}}">Lista de Tipo de Casos</a></li>
                <li><a class="dropdown-item" 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>

PD: Te recomiendo leer este blog de Mark Otto (creador de Boostrap) para que entiendas un poco mejor la razón de ser del diseño de los dropdowns.

1
  • 1
    gracias, me diste la solucion justa que necesitaba
    – mnsperez97
    Commented el 23 oct. 2019 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.