Saltar al contenido

Bootstrap Menu Dropdown

bootstrap-menu-dropdown

Cuando desarrollamos un sitio web con bootstrap y el menu por defecto es con clic, que tenemos que hacer para que el menu trabaje en función a un hover y no clic. Aquí la solución, solo debes de pegarlo en el archivo css de tu página.


.sidebar-nav {
padding: 9px 0;
}

.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
visibility: visible;
}

.dropdown:hover .dropdown-menu {
display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}

.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}

Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/