CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dana
Dana

Reputation: 11

How to set Bootstrap dropdown menu on hover?

I've been editing on a bootstrap navbar example and I have put in the necessary script and css links in the head tag. I want to change the default dropdown to be on hover rather than a button click. I tried to style in css by writing .dropdown:hover .dropdown menu {display:block;} but it didn't work. I think it has something to do with the links but I'm not sure.

This is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXX Dental Clinic</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../website bootstrap/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>
<body>    
      <nav class="navbar navbar-expand-md navbar-light bg-white">
        <a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>        
        <button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"> </span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active px-2">
  <a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item px-2">
  <a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown px-2" >
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
  data-toggle="dropdown">Our Services</a>

  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="#">item1</a>
  <a class="dropdown-item" href="#">item2</a>

</div>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Contact Us</a>
</li>

</ul>
</div>
</nav>

</body>
</html>

Upvotes: 0

Views: 256

Answers (2)

Himanshu Joshi
Himanshu Joshi

Reputation: 292

Add below CSS in head in HTML and it will work fine : 

  <style type="text/css">
    .navbar-nav li:hover>.dropdown-menu {
      display: block;
    }
 </style>

Upvotes: 0

Pedram
Pedram

Reputation: 16575

Pure CSS:

li.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-white">
  <a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"> </span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active px-2">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item px-2">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown px-2">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Our Services</a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">item1</a>
          <a class="dropdown-item" href="#">item2</a>

        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>

    </ul>
  </div>
</nav>

jQuery solution:

Just add .show class to .dropdown and .dropdown-menu

$('li.nav-item.dropdown').hover(function() {
  $(this).addClass('show')
  $(this).find('.dropdown-menu').addClass('show')
}, function() {
  $(this).removeClass('show')
  $(this).find('.dropdown-menu').removeClass('show')
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-white">
  <a class="navbar-brand" href="#"><img src="https://i.pinimg.com/474x/b7/a3/43/b7a3434f363c38d73611694b020a503e.jpg" alt="logo" width="70"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"> </span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active px-2">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item px-2">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown px-2">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Our Services</a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">item1</a>
          <a class="dropdown-item" href="#">item2</a>

        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>

    </ul>
  </div>
</nav>

Upvotes: 4

Related Questions