Dropdown is not displaying on hover - html

Question

I am working on a website. I ran into a slight issue which I haven't been able to fix.
I am trying to make a dropdown menu show up, using 'hover' in CSS, but it is not showing up for some reason.
Here is my HTML code:
<div>
<button class="button button1"> Our Mission</button>
<div class="dropdown">
<button class="button button3">What We Do</button>
<div class="display_things">
<section class="column">
<table>
<tr>
<th>Our donations</th>
</tr>
<tr>
<td><a>Event 1</a></td>
</tr>
<tr>
<td><a>Event 2</a></td>
</tr>
<tr>
<td><a>Event 3</a></td>
</tr>
</table>
</section>
<section class="column">
<table>
<tr>
<th>Our Community Work</th>
</tr>
<tr>
<td><a>Event 1</a></td>
</tr>
<tr>
<td><a>Event 2</a></td>
</tr>
<tr>
<td><a>Event 3</a></td>
</tr>
</table>
</section>
</div>
</div>
<button class="button button4">Donate!</button>
Here is the CSS:
.button3 {
background-color: #00ff9d;
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 10px;
border-radius: 20px;
width:400px;
white-space: nowrap;
}
.display_things {
justify-content: space-around;
margin: 10px;
background-color: lawngreen;
display: none;
width: 1100px;
position: absolute;
}
.button3:hover .display_things{
display: block;
}
.button4 {
background-color: #f4740b;
border: none;
color: white;
padding: 15px 170px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 10px;
border-radius: 20px;
width:400px;
}
.button:hover{
background-color: green;
}
Can anyone tell me why exactly the drop-down is not working? I wanted it to be displayed whenever the button is hovered over.
Thank you!

Answer 1

You're using :hover, so your version .button3:hover .display_things { should include either a + or ~, as you're trying to select a sibling.
So you need to change the selector to either;
.button3:hover + .display_things { (for adjacent sibling)
OR
.button3:hover ~ .display_things { (for general sibling, if you are to place anything(s) between the hover and show elements)
Either will work in your code.