# Dropdown menu to appear when hovering over a menu button

**URL:** https://forum.pinegrow.com/t/dropdown-menu-to-appear-when-hovering-over-a-menu-button/9985
**Category:** Questions
**Created:** [November 1, 2024, 3:24pm UTC](https://forum.pinegrow.com/t/dropdown-menu-to-appear-when-hovering-over-a-menu-button/9985 "2024-11-01T15:24:46Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Bea](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/bea/32/6449_2.png) [@Bea](https://forum.pinegrow.com/u/Bea)
#### Post date: [November 1, 2024, 3:24pm UTC](https://forum.pinegrow.com/t/dropdown-menu-to-appear-when-hovering-over-a-menu-button/9985/1 "2024-11-01T15:24:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mxs](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mxs/32/2943_2.png) [@mxs](https://forum.pinegrow.com/u/mxs)
#### Post date: [November 4, 2024, 12:25pm UTC](https://forum.pinegrow.com/t/dropdown-menu-to-appear-when-hovering-over-a-menu-button/9985/2 "2024-11-04T12:25:12Z")

</div>

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…

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![Bea](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/bea/32/6449_2.png) [@Bea](https://forum.pinegrow.com/u/Bea)
#### Post date: [November 9, 2024, 11:04am UTC](https://forum.pinegrow.com/t/dropdown-menu-to-appear-when-hovering-over-a-menu-button/9985/3 "2024-11-09T11:04:05Z")

</div>

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