У меня есть раскрывающееся меню, которое я создал, и теперь мне нужно сделать раскрывающийся центр по отношению к кнопке, но я не могу понять, я пробовал что-то вроде left: 50, right: 50, которое просто заставляет его перейти на левую сторону или правильно. Нужно, чтобы это было идеально в центре.
Считаете ли вы, что абсолютная позиция теперь неверна?
.userbtn-wrapper {
position: absolute;
display: inline-block;
}
.userbtn {
background-color: transparent;
border-top: 0px;
border-bottom: 0px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
color: rgb(28, 28, 28);
padding-top: 4px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 600;
-webkit-font-smoothing: antialiased;
height: 50px;
display: inline-flex;
align-items: center;
outline: none;
}
.userbtn-content {
display: none;
position: absolute;
background-color: #FFFFFF;
border-left: 1px solid rgba(231, 231, 231);
border-right: 1px solid rgba(231, 231, 231);
border-bottom: 1px solid rgba(231, 231, 231);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
width: 178px;
z-index: 1;
top: 50px;
}
<div class="navbar-user">
<div class="userbtn-wrapper">
<button onclick="usermenu()" id="userbtnid" class="userbtn">user button</button>
<div id="userbtn-contentid" class="userbtn-content">
<a href="/this/" class="navmenu-link"><i class="fas fa-user-astronaut usermenu-ico"></i><span class=userbtn-text>My Profile</span></a>
<a href="/this/" class="navmenu-link"><i class="fas fa-cog usermenu-ico"></i><span class=userbtn-text>Settings</span></a>
<span class="navmenu-inner-text">MANAGE FOLLOWING</span>
<a href="/this/" class="navmenu-link"><i class="fas fa-chart-line usermenu-ico"></i><span class=userbtn-text>Stocks</span></a>
<a href="/this/" class="navmenu-link"><i class="fab fa-wpforms usermenu-ico"></i><span class=userbtn-text>Topics</span></a>
<a href="/this/" class="navmenu-link"><i class="fas fa-users usermenu-ico"></i><span class=userbtn-text>Users</span></a>
<span class="navmenu-spacer"></span>
<a href="/this/" class="navmenu-link"><i class="fas fa-sign-out-alt usermenu-ico"></i><span class=userbtn-text>Logout</span></a>
</div>
</div>
</div>