Cómo hacer que el menú de bootstrap de Twitter sea desplegable en el flotador en lugar de hacer clic

https://stackoverflow.com/questions/8878033

28-10-2019
|

Pregunta

Me gustaría que mi menú Bootstrap se desplace automáticamente en el flotador, en lugar de tener que hacer clic en el título del menú. También me gustaría perder las pequeñas flechas al lado de los títulos del menú.

Solución

Creé un menú desplegable Pure on Hover basado en el último marco de arranque (v2.0.2) que tiene soporte para múltiples submenios y pensé en publicarlo para futuros usuarios:

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

Manifestación

Otros consejos

Para que el menú caiga automáticamente sobre el flotador, esto se puede lograr usando CSS básico. Debe resolver el selector a la opción de menú oculto y luego configurarlo en pantalla como bloque cuando sea el li La etiqueta se desplaza. Tomando el ejemplo de la página Bootstrap de Twitter, el selector sería el siguiente:

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

Sin embargo, si está utilizando las características de respuesta de Bootstrap, no querrá esta funcionalidad en una barra de navegación colapsada (en pantallas más pequeñas). Para evitar esto, envuelva el código anterior en una consulta de medios:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Para ocultar la flecha (Caret), esto se hace de diferentes maneras dependiendo de si está utilizando Twitter Bootstrap versión 2 e inferior o versión 3:

Bootstrap 3

Para eliminar el careto en la versión 3 solo necesita eliminar el HTML <b class="caret"></b> desde el .dropdown-toggle Elemento de anclaje:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 e inferior

Para eliminar el careto en la versión 2, necesita un poco más de información sobre CSS y sugiero ver cómo el :after El elemento pseudo funciona con más detalle. Para que comience en su camino hacia la comprensión, apuntar y eliminar las flechas en el ejemplo de Bootstrap de Twitter, utilizaría el siguiente selector de CSS y código:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Funcionará a su favor si observa más cómo funcionan y no solo usa las respuestas que le he dado.

Gracias a @Cocaakat por señalar que nos faltaba el combinador de niños ">" para evitar que los submenús se muestren en el Padre Hover

Además de la respuesta de "Mi cabeza duele" (que fue genial):

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

Hay 2 problemas persistentes:

Al hacer clic en el enlace desplegable abrirá el menú desplegable. Y permanecerá abierto a menos que el usuario haga clic en otro lugar, o se vuelva sobre él, creando una interfaz de usuario incómoda.
Hay un margen de 1 px entre el enlace desplegable y el menú desplegable. Esto hace que el menú desplegable se oculte si se mueve lentamente entre el menú desplegable y el menú desplegable.

La solución a (1) está eliminando los elementos "clase" y "toggle de datos" del enlace NAV

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Esto también le brinda la capacidad de crear un enlace a su página principal, lo que no fue posible con la implementación predeterminada. Puede reemplazar el "#" con cualquier página que desee enviar al usuario.

La solución a (2) está eliminando el margen en el selector .dropdown-Menu

.navbar .dropdown-menu {
 margin-top: 0px;
}

He usado un poco de jQuery:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Hay muchas soluciones realmente buenas aquí. Pero pensé que seguiría adelante y poner el mío aquí como otra alternativa. Es solo un fragmento de jQuery simple que lo hace como lo haría Bootstrap si admitía a Hover para menores desplegables en lugar de simplemente hacer clic. Solo he probado esto con la versión 3, así que no sé si funcionaría con la versión 2. Guárdelo como un fragmento en su editor y tengalo en el golpe de una llave.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Básicamente, es solo decir que cuando pasa el paso en la clase desplegable, le agregará la clase abierta. Entonces solo funciona. Cuando deja de flotar en el Li de los padres con la clase desplegable o el niño UL/Li's, elimina la clase abierta. Obviamente, esta es solo una de las muchas soluciones, y puede agregarlo para que funcione solo en instancias específicas de .dropdown. O agregue una transición al padre o al niño.

Simplemente personalice su estilo CSS en tres líneas de código

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

Si tienes un elemento con un dropdown clase como esta (por ejemplo):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Luego puede hacer que el menú desplegable se despliegue automáticamente en el cierre, en lugar de tener que hacer clic en su título, utilizando este fragmento de código jQuery:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Aquí hay una demostración

Esta respuesta se basó en @Michael Respuesta, Hice algunos cambios y he agregado algunas adiciones para que el menú desplegable funcione correctamente

Actualizar El complemento está encendido Github Y estoy trabajando en algunas mejoras (como usar solo con atributos de datos (no es necesario JS). He dejado el código a continuación, pero no es lo mismo que está en GitHub.

Me gustó la versión puramente CSS, pero es bueno tener un retraso antes de que se cierre, ya que generalmente es una mejor experiencia de usuario (es decir, no castigada por un deslizamiento de ratón que va 1 PX fuera del menú desplegable, etc.), y como se menciona en los comentarios , existe el 1 px de margen con el que tiene que lidiar o, a veces, el NAV se cierra inesperadamente cuando se mueve al menú desplegable desde el botón original, etc.

Creé un pequeño complemento rápido que he usado en un par de sitios y ha funcionado bien. Cada artículo de Nav se maneja de forma independiente, por lo que tienen sus propios temporizadores de retraso, etc.

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};

los delay El parámetro se explica por sí mismo y el instantlyCloseOthers Instantáneamente cerrará todos los demás desplegables que están abiertos cuando pases sobre uno nuevo.

No es puro CSS, pero con suerte ayudará a alguien más a esta hora tardía (es decir, este es un hilo viejo).

Si lo desea, puede ver los diferentes procesos que pasé (en una discusión sobre el #concrete5 IRC) para que funcione a través de los diferentes pasos en esta esencia: https://gist.github.com/3876924

El enfoque del patrón de complemento es mucho más limpio para admitir temporizadores individuales, etc.

Ver el entrada en el blog para más.

Esto funcionó para mí:

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

Esto está integrado en Bootstrap 3. Simplemente agregue esto a su CSS:

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

Aún mejor con jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Puedes usar el valor predeterminado $().dropdown('toggle') Método para alternar el menú desplegable en Hover:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

Solo quiero agregar que si tiene varios menores (como yo), debe escribir:

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

Y funcionará correctamente.

En mi opinión, la mejor manera es así:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Muestra de muestra:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

La mejor manera de hacerlo es activar el evento de clic de Bootstrap con un flotador. De esta manera, aún debería seguir siendo amigable con los dispositivos táctiles.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Lo he manejado de la siguiente manera:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Espero que esto ayude a alguien...

También se agregó margen-top: 0 para restablecer el margen de Bootstrap CSS para .dropdown-Menu para que la lista de menú no desaparezca cuando el usuario fluya lentamente desde el menú desplegable a la lista del menú.

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

.nav .dropdown-menu {
    margin-top: 0;
}

Esta es probablemente una idea estúpida, pero para eliminar la flecha apuntando hacia abajo, puede eliminar el

<b class="caret"></b>

Sin embargo, esto no hace nada para señalar uno ...

He publicado un complemento adecuado Para la funcionalidad desplegable Bootstrap 3, en la que incluso puede definir qué sucede al hacer clic en el dropdown-toggle elemento (el clic se puede deshabilitar):

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

¿Por qué lo hice cuando ya hay muchas soluciones?

Tuve problemas con todas las soluciones previamente existentes. Los simples CSS no están usando el .open clase en el .dropdown, por lo que no habrá comentarios sobre el elemento desplegable cuando sea visible el desplegable.

Los JS están interfiriendo haciendo clic en .dropdown-toggle, por lo que el desplegable aparece en el hover, luego lo oculta al hacer clic en un menú desplegable abierto, y mover el mouse activará el menú desplegable para aparecer nuevamente. Algunas de las soluciones JS están rompiendo la compatibilidad de iOS, algunos complementos no funcionan en los navegadores de escritorio modernos que respaldan los eventos táctiles.

Por eso hice el Desplegable de bootstrap flotante enchufar que evita todos estos problemas por Usando solo la API JavaScript de Bootstrap estándar, sin hack.. Incluso los atributos ARIA funcionan bien con este complemento.

Use este código para abrir el submenú en MouseHover (solo escritorio):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

Y si desea que se pueda hacer clic en el menú de primer nivel, incluso en dispositivos móviles, agregue esto:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

El submenú (menú desplegable) se abrirá con MouseHover en el escritorio y con clic/tacto en dispositivos móviles y tabletas. Una vez que el submenú estaba abierto, un segundo clic le permitirá abrir el enlace. Gracias a if ($(window).width() > 767), el submenú tomará el ancho de pantalla completo en el móvil.

$('.dropdown').hover(function(e){$(this).addClass('open')})

Esto esconderá los Up.

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

Esto debería ocultar los descensos y sus caretes si son más pequeños que una tableta.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

La solución jQuery es buena, pero tendrá que lidiar con eventos de clic (para dispositivos móviles o tabletas) ya que el floso no funcionará correctamente ... ¿podría hacer una detección de re-tamaño de ventana?

La respuesta de Andres Ilich parece funcionar bien, pero debe envolverse en una consulta de medios:

@media (min-width: 980px) {

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

Sobrescribe bootstrap.js con este script.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

});

Aquí está mi técnica que agrega un ligero retraso antes de que el menú esté cerrado después de que deje de flotar en el menú o en el botón de palanca. los <button> que normalmente haría clic para mostrar el menú NAV es #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

Para mejorar Respuesta de Sudharshan, Envuelvo esto en una consulta de medios para evitar el rondado cuando se encuentra en los anchos de visualización de XS ...

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Además, no se requiere el careto en el marcado, solo el desplegable clase para el li.

Esto funciona para WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

Entonces tienes este código:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Normalmente funciona en un evento de clic, y desea que funcione en un evento flotante. Esto es muy simple, solo use este código JavaScript/jQuery:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Esto funciona muy bien y aquí está la explicación: tenemos un botón y un menú. Cuando pasamos el botón, mostramos el menú, y cuando mouse el botón ocultamos el menú después de 100 ms. Si te preguntas por qué uso eso, es porque necesitas tiempo para arrastrar el cursor desde el botón sobre el menú. Cuando esté en el menú, se restablece el tiempo y puede permanecer allí tanta tiempo como desee. Cuando salga del menú, ocultaremos el menú instantáneamente sin ningún tiempo de espera.

He usado este código en muchos proyectos, si encuentra algún problema al usarlo, no dude en hacerme preguntas.

Para el caret ... no he visto a nadie que especifique CSS simple que bloquee totalmente el careto.

Aquí tienes:

.caret {
    display: none !important;
}

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow