CODEWITHSUNDEEP
htmlcssdrop-down-menuhoverbootstrap-4
flash
flash

Reputation: 1519

Dropdown on hover in Bootstrap 4.1

I have a website in which I have created dropdown using Bootstrap 4.1. At this moment, the dropdown is working on click.

The HTML code which I have used in order to create the dropdown are:

<div class="collapse 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>


Problem Statement:

I am wondering what changes I should make in the code above so that I can see the dropdown items (A,B,C,D) on hover.

Upvotes: 5

Views: 15072

Answers (2)

amarjeet singh
amarjeet singh

Reputation: 1

If You Want to show dropdown on hover in bootstrap then you need to visit here here is very easy way to do that . there are less number of code of css and your issue will fix

https://www.youtube.com/watch?v=owdqNLzII38

Upvotes: 0

Tushar
Tushar

Reputation: 4418

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>

Upvotes: 24

Related Questions