Bootstrap Dropdown with Hover

The easiest solution would be in CSS. Add something like...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

Working Fiddle

Bootstrap dropdown on hover

Ok, so after a lot of reading boostrap docs, seeing what changes on the code when I click de dropdown and Jquery coding I make it work, this is what I did:

So first I notice that when you click the dropdown this change in the html:

The a element that is inside the li with class dropdown has the class show and the aria-expanded is changed to true.
The div with class dropdown-menu that is also indise the li with class dropdown has the class shown and the attribute data-bs-popper = none is added.

So with this in mind I made 2 functions to get the class dropdown and watch when the mouse hover this element, so when the mouse enter I add the classes and the attribute, when the mouse leaves I remove the classes and attribute, and this is what it looks like:

$('.dropdown').on("mouseenter", () => {
    $(".dropdown > a").addClass('show')
    $(".dropdown > a").attr("aria-expanded","true");
    $(".dropdown > div").attr("data-bs-popper","none");
    $(".dropdown > div").addClass('show')
  })

$('.dropdown').on("mouseleave", () => {
    $(".dropdown > a").removeClass('show')
    $(".dropdown > a").attr("aria-expanded","false");
    $(".dropdown > div").removeAttr("data-bs-popper","none");
    $(".dropdown > div").removeClass('show')
  })

As you can see I use the class dropdown and select the a and div elements that are inside this li and add or remove the classes and attribute, this is the simple code:

<li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" id="drop" role="button" data-bs-toggle="dropdown" aria-expanded="false">Temas</a>
     <div class="dropdown-menu" aria-labelledby="drop">
           <a class="dropdown-item" href="../default/">Default</a>
           <a class="dropdown-item" href="../united/">United</a>
           <a class="dropdown-item" href="../yeti/">Yeti</a>
     </div>
</li>

And finally in the CSS I add margin-top: -1vh so the dropdown menu is open when the mouse moves to the element, so the final css is this:

.dropdown:hover .dropdown-menu {
  display: flex;
  flex-wrap: wrap;
}

.dropdown-menu.show {
  margin-top: -1vh;
  width: 40%;
  margin-left: 38vw;
}

.dropdown-item {
  width: 25% !important;
}

Dropdown on hover in Bootstrap 4.1

Are you looking for this?

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

<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" /><div class="navbar-collapse text-center" id="navbarResponsive">  <ul class="navbar-nav ml-auto">
    <li class="nav-item dropdown">      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      main menu    </a>      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">        <a class="dropdown-item" href="#">A</a>        <a class="dropdown-item" href="#">B</a>        <a class="dropdown-item" href="#">C</a>        <a class="dropdown-item" href="#">D</a>      </div>    </li>
    <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
  </ul></div>

How to make Twitter Bootstrap menu dropdown on hover rather than click

I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:

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>

Bootstrap - Dropdown goes away on hover

You just need this bit of css:

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar">  <div class="container-fluid">    <div class="navbar-header">      <a class="navbar-brand" href="#">WebSiteName</a>    </div>    <ul class="nav navbar-nav">      <li class="active"><a href="#">Home</a></li>      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>        <ul class="dropdown-menu">          <li><a href="#">Page 1-1</a></li>          <li><a href="#">Page 1-2</a></li>          <li><a href="#">Page 1-3</a></li>        </ul>      </li>      <li><a href="#">Page 2</a></li>      <li><a href="#">Page 3</a></li>    </ul>  </div></nav>  <div class="container">  <h3>Navbar With Dropdown</h3>  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p></div>

React-Bootstrap dropdown on hover

const [show, setShow] = useState(false);
const showDropdown = (e)=>{
    setShow(!show);
}
const hideDropdown = e => {
    setShow(false);
}

  <NavDropdown title="Dropdown" 
   id="collasible-nav-dropdown" 
   show={show}
   onMouseEnter={showDropdown} 
   onMouseLeave={hideDropdown}
   >

I Have Used This For Open Dropdown Menu On Hover in React Bootstrap.

Bootstrap Dropdown with Hover