Dropdown menu to appear when hovering over a menu button

General Questions
1

Hello, I’m struggling to make this drop-down menu appear when I hover over the menu button, and disappear after I move the cursor away from it.

This video is the example of what exactly I’m trying to do:

I want to do this simply with HTML and CSS preferably. That sub-menu should appear, and disappear like a hovered link that lightens up when you place your mouse over it…
If you know how to do it please help.

Thanks,
Bea

2

Hi Bea

Add these two lines to bootstrap.css file

.dropdown:hover>.dropdown-menu {display: block;}
.dropdown>.dropdown-toggle:active {pointer-events: none;}

Example html…

<div class="dropdown">
  <button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-mdb-toggle="dropdown" aria-expanded="false"  >Dropdown button</button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>
1 Like
3

Thank you, yes now it works. I was able to do it. Super.