I'm working on a personal website and trying to implement dropdown behavior on some of my navbar elements. Currently, my relevant CSS and HTML for my navbar is:

```css
.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown-content {
  list-style: none;
}

.dropdown-content li {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #e6e6e6;
}

.dropdown:hover .dropdown-content {
  display: block;
}
```

```html
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="/wantlists">Wantlists</a></li>
    <li class="dropdown"><a href="#">Hover here</a>
      <ul class=dropdown-content>
        <li><a href="#">Test!</a></li>
        <li><a href="#">Longer title</a></li>
      </ul>
    </li>
    <!-- End parent dropdown -->
  </ul>
</div>
```

only span around half the width of the parent li and I cannot for the life of me figure out how to make it span the full width. Below is a screenshot of part of my navbar when hovering over the "Hover here" element. I'd like the gray background of the "Test!" and "Longer title" sub-li elements to expand left to the width of the white background of the "Hover here" element. I've tried a bunch of different things and have explored similar questions, but none of the answers I have seen have solved my problem

[![Dropdown](https://i.stack.imgur.com/P7rXi.png)](https://i.stack.imgur.com/P7rXi.png)

I was able to get the gray background I desired by adding a background-color rule to .dropdown-content, but then my next step would be to change the background color of an individual li element on hover within the dropdown, and then I'm back to only being able to highlight part of that li area, so that's not exactly what I'm looking for