.container
  h2 Dropdown when hover
  p.lead Open Bootstrap dropdown when hover

  ul.nav.nav-pills
    li.dropdown
      a#drop1 href="https://www.google.com" role="button"  Dropdown 1
      ul#menu1.dropdown-menu aria-labelledby="drop1" role="menu" 
        li role="presentation" 
          a href="#" role="menuitem"  Action
        li role="presentation" 
          a href="#" role="menuitem"  Another action
        li role="presentation" 
          a href="#" role="menuitem"  Something else here
        li.divider role="presentation" 
        li role="presentation" 
          a href="#" role="menuitem"  Separated link
    li.dropdown
      a#drop2 href="https://www.google.com" role="button"  Dropdown 2
      ul#menu1.dropdown-menu aria-labelledby="drop2" role="menu" 
        li role="presentation" 
          a href="#" role="menuitem"  Action
        li role="presentation" 
          a href="#" role="menuitem"  Another action
        li role="presentation" 
          a href="#" role="menuitem"  Something else here
    li.dropdown
      a#drop3 href="https://www.google.com" role="button"  Dropdown 3
      ul#menu1.dropdown-menu aria-labelledby="drop3" role="menu" 
        li role="presentation" 
          a href="#" role="menuitem"  Action
        li role="presentation" 
          a href="#" role="menuitem"  Another action
        li role="presentation" 
          a href="#" role="menuitem"  Something else here
        li.divider role="presentation" 
        li role="presentation" 
          a href="#" role="menuitem"  Separated link

[[[//codepen.io/manumorante/pen/FsGHp.slim]]]
View Compiled
.dropdown-menu{
   margin-top: 0;
}
View Compiled
$('.nav .dropdown').hover(function() {
	$(this).addClass('open');
}, function() {
	$(this).removeClass('open');
});

External CSS

  1. //codepen.io/manumorante/pen/FsGHp.scss
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js