Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem.
Below is the CSS code for the menu:
.more-menu {
position: absolute;
top: 100%;
z-index: 900;
float: left;
width: fit-content;
margin-top: 29px;
margin-left: calc(50% - 45px);
background-color: #fff;
border: 1px solid #ccd8e0;
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
opacity: 0;
-webkit-transform: translate(0, 15px) scale(0.95);
transform: translate(0, 15px) scale(0.95);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.more-dot {
background-color: #d7262c;
margin: 0 auto;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 3px;
border-radius: 50%;
transition: background-color 0.3s;
}<div class="show-more-menu">
<button id="more-btn">
<span class="more-dot" />
<span class="more-dot" />
<span class="more-dot" />
</button>
<div class="more-menu" aria-hidden="true">
<div class="more-menu-caret">
<div class="more-menu-caret-outer" />
<div class="more-menu-caret-inner" />
</div>
</div>
</div>