I have a dropdown and a button, how would I go on about making the dropdown the same size as the button?

```css
: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;
}
```

```html
<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>
```

I tried making a variable and then putting the same size to them but that didn't work.
['https://Stackoverflow.com/questions/61611313', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/13124037/']
What I did

Added class `button-li` to the `li` element which has `button`

And added this 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/>
you can add w-100 to the dropdown-menu class part

```
<div class="dropdown" style="margin-right: 5px;width: 23%;">
  <button class="btn btn-block btn-warning dropdown-toggle btn-lg" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    OPERAZIONI
  </button>
  <div class="dropdown-menu w-100" aria-labelledby="dropdownMenu2">
<button type="button" class=" dropdown-item border border-warning rounded">
    <a class="bottonePreferenze" data-link="/pg/ac_Operazione" href="/pg/ac_Operazione">
          <i class="fa fa-cube fa-2x"></i>
    <span>ANAGRAFICA OPERAZIONI</span>
    </a></button>
  </div>
</div>

```