Dropdown menu not showing the listed elements when hovered-CodePudding

For some reason this dropdown menu is not showing the listed elements when hovered. Using bootstrap.

Am I missing something here? Maybe it's something simple but I just cannot see it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Services -->
<li >

  <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>

  <div  aria-labelledby="navbarDropdown">
    <h6 >Dropdown header</h6>
    <a  href="#">Rewiring</a>
    <a  href="#">Light Fixes</a>
    <a  href="#">Showers</a>
    <div ></div>
    <a  href="#">Rewiring</a>
    <a  href="#">Light Fixes</a>
    <a  href="#">Showers</a>
  </div>
</li>

CodePudding user response：

change <a href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a>

<button type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button>

Change it to a button then it shoud work!!

CodePudding user response：

In Bootstrap, dropdown runs by default on mouse click, if you want to show dropdown on mouse hover then you have to use css or js

I have used css

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

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <div >
    <button type="button"  data-bs-toggle="dropdown">
      Services
    </button>
    <ul >
      <li><h6 >Dropdown header</h6></li>
      <li><a  href="#">Rewiring</a></li>
      <li><a  href="#">Light Fixes</a></li>
      <li><a  href="#">Showers</a></li>
      <li><hr ></li>
      <li><a  href="#">Rewiring</a></li>
      <li><a  href="#">Light Fixes</a></li>
      <li><a  href="#">Showers</a></li>
    </ul>
  </div>