Dropdown menu <li> elements not full width as parent

Question

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:

.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;
}

<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

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

Answer 1

* {
margin: 0;
padding: 0;
}

.dropdown-content {
      /*display: none;*/
      position: absolute;
}
ul.nav {
      list-style: none;
}
.dropdown-content a {
      padding: 1em;
      background-color: #e6e6e6;
      display: block;
}
ul.dropdown-content {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-content li {
margin: 0;
padding: 0;
}
.dropdown:hover .dropdown-content {
      display: block;
}

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

* {
margin: 0;
padding: 0;
}

.dropdown-content {
      /*display: none;*/
      position: absolute;
}
ul.nav {
      list-style: none;
}
.dropdown-content a {
      padding: 1em;
      background-color: #e6e6e6;
      display: block;
}
ul.dropdown-content {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-content li {
margin: 0;
padding: 0;
}
.dropdown:hover .dropdown-content {
      display: block;
}

<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 gre gre gẻ gẻ gre gé</a></li>
           </ul>
      </li> <!-- End parent dropdown -->
</ul>
</div>

Answer 2

If you make the <li> fullwidth but not the <a>, you won't be able to click on the whole menu item. Here's some code to get you pointed in the right direction.

Main things to note:

• Remove padding for .dropdown-content
• Made .dropdown-content the fullwidth of the parent li
• Repeated last note on li and a
• Made a :hover class for the a

.nav li {
      display: inline-block;
      position: relative;
}
.dropdown-content {
      display: none;
      position: absolute;
}
.dropdown-content {
      list-style: none;
      padding-left: 0; /* moves the dropdown to matche left alignment of menu item */
      min-width: 100%; /* makes the dropdown container the same width as the menu item */
}
.dropdown-content li {
      width: 100%; /* makes the dropdown menu item the same width as the container */
}
.dropdown-content a {
      display: block;
      padding-top: 15px;
      padding-bottom: 15px;
      background-color: #e6e6e6;
      width: 100%;  /* makes the anchor tag the same width as the dropdown menu item */
}
.dropdown-content a:hover {
      background-color: #dddddd; /* add a hover color the the anchor tag instead of the li */
}
.dropdown:hover .dropdown-content {
      display: block;
}

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

Answer 3

Please add the following css

.dropdown-content
{
    padding-left: 0px;
}

This will works.

Answer 4

You need to size the link/a href not the li, and you forgot quotes around the list class "dropdown-content" in the html. I've added a global selector to simulate a css reset just to show list styling and spacing properly:

* {
margin: 0;
padding: 0;
}

.dropdown-content {
      /*display: none;*/
      position: absolute;
}
ul.nav {
      list-style: none;
}
.dropdown-content a {
      padding: 1em;
      background-color: #e6e6e6;
      display: block;
}
ul.dropdown-content {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-content li {
margin: 0;
padding: 0;
}
.dropdown:hover .dropdown-content {
      display: block;
}

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