How can I create a dropdown Button

Hi Jenny,

This should give you an idea how to place a dropdown button:
https://www.w3schools.com/css/css_dropdowns.asp

Let me know if this helps :)

Dear Ying,

I Tried it out - but. What kind of class should I use for the menu?
I used the code from the site, but I want to have a button from Generate Press.
So the code did not work. I think.

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

The CSS is just for your reference unless you are using the exact same HTML, otherwise, it won't work.

I would recommend try this structure if you are using Generateblocks:
https://www.screencast.com/t/PkJiEwEGE

1. set the container to a contained width.

2. Give the Buttons block(parent) an additional CSS class: dropdown, give the other Buttons block(child) an additional CSS class: dropdown-content.

3. Activate Fill Horizontal Space for the parent Buttons block.

4. Try this CSS:

.gb-button-wrapper.dropdown:hover + .gb-button-wrapper.dropdown-content {
    display: block !important;
}
.gb-button-wrapper.dropdown-content {
    display: none;
}

Let me know how it works :)

Dear Ying. Thanks a lot, that would be great but my button is invisible after hovering on the Submenu. Have you got an Idea for me to solve this?

You seem didn't do step 3, and you didn't wrap a contained-width container (eg. set it to 250px) outside the 2 Buttons block.

Please try the exact same structure I suggested.

Let me know :)

Dear Ying. Thanks a lot, I have made it - but, It seems I have got still an mistake :/.

The Button 2 and Button should be wrapped in the same Buttons block.

Please refer to the screenshot I attached here:
https://generatepress.com/forums/topic/how-can-i-create-a-dropdown-button/#post-1859304

So there're only 2 Buttons blocks, not 3.

Dear Ying - I tried it a few times, and decided after this, I don't want to do this anymore. 🤓
Thank you for your help 🌻

You are welcome :)