Drop down menu disappears too quicky - css

Question

When I give top: 2rem to dropdown-content it works fine but doesn't look good.
It does look fine at 3rem but dropdown just disappears when I hover it. I tried with :focus and :active still same.
body {
display: grid;
place-content: center;
}
.consumer-header__menu-label {
position: relative;
cursor: pointer;
display: flex;
padding: 0 1rem;
}
.dropdown-content {
position: absolute;
top: 3rem;
right: 0;
display: none;
background-color: #ffffff;
width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.eds-dropdown-menu__contents:hover .dropdown-content {
display: block;
}
<div class="consumer-header__menu">
<div class="dropdown-menu">
<div class="eds-dropdown-menu__contents">
<div class="consumer-header__menu-label">
<div class="dropdown-content">
<li>Why Eventbrite?</li>
<li>Pricing</li>
<li>Resources</li>
</div>
Organize
<span class="eds-dropdown-menu__icon">
Custom Icons Component
</span>
</div>
</div>
</div>
</div>

Answer 1

I would use the native HTML <details> element for this:
body {
display: grid;
place-content: center;
}
details {
min-width: 260px;
}
details:hover, summary:focus {
cursor: pointer;
background-color: #eee;
}
details ul {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
<div class="consumer-header__menu">
<div class="dropdown-menu">
<div class="eds-dropdown-menu__contents">
<details>
<summary>Organize</summary>
<ul>
<li>Why Eventbrite?</li>
<li>Pricing</li>
<li>Resources</li>
</ul>
</details>
</div>
</div>
</div>