Dropdown Menu styling issues CSS - html

Question

I'm creating a dropdown menu with CSS, it different options depending on the page it could be 1 or 2 options, I will share the css code. My issue is why the position of the tooltip dialog changed depending on how many options do we have:
This is how it looks like with two options:
This is how it looks like with 1 option:
As you can see the position change according with the number of options, here is the code:
.container {
display: flex;
width: auto;
height: auto;
position: relative;
justify-content: center;
}
.tooltip {
min-width: 10rem;
width: auto;
min-height: 2rem;
height: auto;
background-color: var(--app-secondary-color);
text-align: center;
position: absolute;
z-index: 1;
font-size: 1.2rem;
display: flex;
justify-content: flex-start;
padding: 1rem;
flex-direction: column;
box-shadow: 0 0.3rem 1.2rem #CCC;
transform: translate(-25%, calc(40%));
border-radius: 3px;
top: 0;
}
.tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -10px;
left: calc(75% - 10px);
border-bottom: solid 5px var(--app-secondary-color);
border-left: solid 10px transparent;
border-right: solid 10px transparent;
border-top: solid 5px transparent;
}
<div class="container">
<i>Icon picture</i>
<div id="tooltipTop" class="tooltip">
<span>Option 1</span>
<span>Option 2</span>
</div>
</div>
What do you think should I changed on my css or do am I missing something?

Answer 1

remove calc(40%) and instead try using margin-top to fix the dropdown.
.tooltip {
margin-top: 2em;
min-width: 10rem;
width: auto;
min-height: 2rem;
height: auto;
background-color: var(--app-secondary-color);
text-align: center;
position: absolute;
z-index: 1;
font-size: 1.2rem;
display: flex;
justify-content: flex-start;
padding: 1rem;
flex-direction: column;
box-shadow: 0 0.3rem 1.2rem #CCC;
transform: translate(-25%);
border-radius: 3px;
top: 0;
}