<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-app"> <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="#"><span>RCD</span></a> </div> <div id="navbar-app" class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Inicio</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administración <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu row" role="menu"> <li class="col-md-3"> <ul> <li class="dropdown-header">Usuarios</li> <li><a href="#">Perfil</a></li> <li><a href="#">ModPerfil</a></li> <li><a href="#">TipoIdentificacion</a></li> <li><a href="#">Usuario</a></li> <li><a href="#">Empresas</a></li> <li><a href="#">UsrPerfil</a></li> </ul> </li> <li class="col-md-9"> <span class="dropdown-header">Configuración</span> <div class="row"> <ul class="col-md-4"> <li class="sub-header">A-B</li> <li><a href="">Actividad</a></li> <li><a href="">Actividad Dian</a></li> <li><a href="">Alcaldia</a></li> <li><a href="">Autoridad Ambiental</a></li> <li><a href="">Barrio</a></li> </ul> <ul class="col-md-4"> <li class="sub-header">C-D</li> <li><a href="">Caracter Proyecto</a></li> <li><a href="">Característica</a></li> <li><a href="">Categoría</a></li> <li><a href="">Ciudad</a></li> <li><a href="">Comuna</a></li> <li><a href="">Concepto Aprobación Aprovechamiento</a></li> <li><a href="">Concepto Aprobación DispFinal</a></li> <li><a href="">Configuración general</a></li> <li><a href="">Curaduria</a></li> <li><a href="">Departamento</a></li> </ul> <ul class="col-md-4"> <li class="sub-header">E-Z</li> <li><a href="">Escala Proyecto</a></li> <li><a href="">Etapas Proyecto</a></li> <li><a href="">Etapa RCD</a></li> <li><a href="">Modalidad Servicio</a></li> <li><a href="">Naturaleza Jurídica</a></li> <li><a href="">País</a></li> <li><a href="">Tipo Permiso</a></li> <li><a href="">Tipo Planta</a></li> <li><a href="">Tipo Proyecto</a></li> <li><a href="">Tipo Rcd</a></li> <li><a href="">Tipo Transportador</a></li> <li><a href="">Tipo Uso Predio</a></li> <li><a href="">Unidades</a></li> <li><a href="">Uso Suelo</a></li> </ul> </div> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="btn btn-sm btn-nav btn-default"><span class="glyphicon glyphicon-off"></span> Cerrar sesión</a></li> </ul> </div> </div> </div>

.navbar { background-color: #215A9A!important; z-index: 1; border-radius: 0!important; border: 0!important; } .navbar-brand span { color: #FFF; } .navbar-brand { border-right: 1px solid #fff; } ul.nav.navbar-nav{ } ul.nav.navbar-nav > li > a{ color:#fff; } ul.nav.navbar-nav > li > a:hover{ color:#fff; } .mega-dropdown { position: static !important; /* width: 100%;*/ } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } /*.mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } */ .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li ul li { list-style: none; } .mega-dropdown-menu > li ul li a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul li a:hover, .mega-dropdown-menu > li ul li a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight: bold; } .mega-dropdown-menu .sub-header{ font-size: 16px; font-weight: 300; padding: 3px 20px; } .btn-nav{ padding:5px 10px 5px 10px!important; margin-top:10px; color:blue; background-color:transparent; } a.btn-nav:hover{ background-color:#fff!important; color:#215A9A!important; }