'How do I get the background colour to change upon hover in a div dropdown

I have been trying to make the colour fill the entire dropdown relative to the text you are hovering but it is not filling the whole div element, only the space around the word.

I have created a Fiddle to show the issue that I am having. I'm a beginner in CSS and HTML.

As you can see I have tried to add padding but it is not filling the div element as you hover it.

THE HTML is provided below and also within the Fiddle

header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 1.0rem;
}

.sub-1 {
  display: none;
}

.sub-1 ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-right: 4rem;
  padding-left: 1rem;
  margin-left: -9.5rem;
  height: 27.5rem;
  font-size: 1.6rem;
  background-color: white;
  list-style: none;
}

.sneakers {
  margin-top: 2rem;
}

.sub-1 a:link,
.sub-1 a:visited {
  color: black;
  text-decoration: none;
}

.sub-1 a:hover {
  padding: 10px;
  background-color: blue;
}

li:hover .sub-1 {
  display: block;
  position: absolute;
  margin-left: -2rem;
  box-shadow: 1px 1px 10px grey;
}

.search-txt {
  border: none;
  outline: none;
  padding-top: 1.0rem;
  padding-left: 1.0rem;
  font-size: 1.5rem;
  color: black;
}

.search-nav {
  display: flex;
  font-size: 1.6rem;
  list-style: none;
  gap: 2.0rem;
  margin-left: -7.0rem;
  margin-top: -0.5rem;
  caret-color: transparent;
}
<header class="header">

  <body>

    <div class="navbar">

      <ul class="search-nav">
        <li><a class="main-nav-link" href="#browse">Browse</a>
          <div class="sub-1">
            <ul class="">
              <li class="sneakers"><a href="#">Sneakers</a>
              </li>
              <li><a href="#">Apparel</a></li>
              <li><a href="#">Electronics</a></li>
              <li><a href="#">Trading Cards</a></li>
              <li><a href="#">Collectibles</a></li>
              <li><a href="#">Accessories</a></li>
              <li><a href="#">NFTs</a></li>
            </ul>
          </div>
        </li>

        <li><a class="main-nav-link" href="#news">News</a></li>
        <li><a class="main-nav-link" href="#help">About</a>

        </li>
        <li><a class="main-nav-link" href="#account">My Account</a></li>
        <li><a class="main-nav-link sell" href="#sell">Sell</a></li>
      </ul>

    </div>

</header>

Fiddle

htmlcsshover


Solution 1:[1]

if i understand correctly the wrapper div with the sub-1 class is unnecessary. If you remove that div and add that class to the ul below it

      <li><a class="main-nav-link" href="#browse">Browse</a>
        <ul class="sub-1">
          <li class="sneakers"><a href="#">Sneakers</a>
          </li>
          <li><a href="#">Apparel</a></li>
          <li><a href="#">Electronics</a></li>
          <li><a href="#">Trading Cards</a></li>
          <li><a href="#">Collectibles</a></li>
          <li><a href="#">Accessories</a></li>
          <li><a href="#">NFTs</a></li>
        </ul>

Then in your css add a background-color

 li:hover > .sub-1{
 display: block;
 position: absolute;
 margin-left: -2rem;
 box-shadow: 1px 1px 10px grey;
 background: red;
}

I hope this helps, cheers!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A. Pallis

Related Questions