Bootstrap : Hacer que el dropdown se despliegue al pasar el mouse
Fecha Publicación:
01 de Octubre de 2022
Fecha Modificación:
01 de Octubre de 2022
Codigo Bootstrap Menu:
<nav class="navbar navbar-expand-md navbar-light bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu"
aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<ul id="menu-menuprincipalbootstrap-5" class="navbar-nav me-auto mb-2 mb-md-0 dropdown-menu-start">
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page
menu-item-home nav-item nav-item-37">
<a href="#" class="nav-link ">Inicio</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page
menu-item-has-children dropdown nav-item nav-item-38">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Servicios</a>
<ul class="dropdown-menu depth_0">
<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom
nav-item nav-item-54"><a href="#" class="dropdown-item ">Diseños Web</a>
</li>
<li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom
nav-item nav-item-55"><a href="#" class="dropdown-item ">Venta Hosting</a>
</li>
</ul>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page
current-menu-item page_item page-item-12 current_page_item nav-item nav-item-53">
<a href="#" class="nav-link active">Quienes Somos</a>
</li>
</ul>
</div>
</div>
</nav>
Hacer que el dropdown se despliegue al pasar el mouse usando la propiedad CSS
/* Bootstrap : Hacer que el dropdown se despliegue al pasar el mouse */
.dropdown:hover .dropdown-menu {
display: block !important;
}
Explicación:
<li id="menu-item-38" tiene como clase dropdown , dentro de ese LI hay un <UL> con la clase class="dropdown-menu".
Otros Tutoriales
Bootstrap Hover Dropdown Plugin
https://github.com/mdbootstrap/bootstrap-hover-dropdown
https://cameronspear.com/demos/bootstrap-hover-dropdown/#
https://codepen.io/eborio/pen/rwbYWa
Articulo : 1640 - Veces Leidas