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

https://webdesign.tutsplus.com/es/tutorials/how-to-make-the-bootstrap-navbar-dropdown-work-on-hover--cms-33840

 

 

Articulo : 1640 - Veces Leidas
Compartir Articulo:
×

¡Apóyame suscribiéndote a mi canal!

Tutoriales sobre Diseño Web