выпадающее меню по центру абсолютной позиции - PullRequest
1 голос
/ 22 марта 2020

У меня есть раскрывающееся меню, которое я создал, и теперь мне нужно сделать раскрывающийся центр по отношению к кнопке, но я не могу понять, я пробовал что-то вроде 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...