Как сделать раскрывающийся список того же размера, что и кнопка (ширина)

Question

У меня есть раскрывающийся список и кнопка, как мне go сделать раскрывающийся список того же размера, что и кнопка?

:root {
  --navbarbgc: rgb(83, 79, 79);
  --dropwidth: 100px;
}

body {
  margin: 0;
}

ul {
  list-style: none;
}

.navbar {
  background-color: var(--navbarbgc);
}

.navbar>ul>li>button {
  width: var(--dropwidth);
}

#navdrop {
  position: absolute;
  background-color: var(--navbarbgc);
  justify-content: center;
}

<div class="navbar">
  <ul>
    <li><button id="navdropbutton">Dropdown</button>
      <ul id="navdrop">
        <li>Option1</li>
        <li>Option2</li>
        <li>Option3</li>
        <li>Option4</li>
        <li>Option5</li>
        <li>Option6</li>
        <li>Option7</li>
      </ul>
    </li>
  </ul>
</div>

Я попытался создать переменную, а затем присвоить им тот же размер, но это не сработало.

Answer 1

Здесь я дал кнопку ширину из 100 пикселей , удалил отступ из # navdrop и дал width of 100px to # navdrop (то же, что и кнопка), тогда я просто центрировал текст, используя text-align . вы должны НЕ использовать justify-content , потому что сейчас он ничего не делает для вас. используйте justify-content с Flex

#navdrop {
    position: absolute;
    background-color: var(--navbarbgc);
    width: 100px;
    padding-left: 0px;
    text-align: center;
}
#navdropbutton {
  width: 100px;  
}

Fiddle : https://jsfiddle.net/10c2axds/1/

Answer 2

Что я сделал

Добавил класс button-li к элементу li, который имеет button

И добавил это css

#navdrop {
  position: absolute;
  background-color: var(--navbarbgc);
  justify-content: center;
  padding: 0;
  width: 100%;
}

.button-li {
  display: inline-block;
  position: relative;
}

Fiddle https://jsfiddle.net/vsm15jok/