Как получить цвет фона, чтобы измениться при падении в выпадении Div ⇐ CSS

[Anonymous]

Я пытался заставить цвет заполнить весь выпадающий список по сравнению с текстом, который вы паряете, но он не заполняет весь элемент Div, только пространство вокруг слова. Я новичок в CSS и HTML. < /P>
Как вы видите, я пытался добавить накладку, но он не заполняет элемент Div, когда вы его парят. />

Код: Выделить всё

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;
}< /code>




[list]
[*][url=#browse]Browse[/url]


[url=#]Sneakers[/url]

[*][url=#]Apparel[/url]
[*][url=#]Electronics[/url]
[*][url=#]Trading Cards[/url]
[*][url=#]Collectibles[/url]
[*][url=#]Accessories[/url]
[*][url=#]NFTs[/url]
[/list]



[*][url=#news]News[/url]
[*][url=#help]About[/url]

[*][url=#account]My Account[/url]
[*][url=#sell]Sell[/url]

Fiddle

Подробнее здесь: https://stackoverflow.com/questions/722 ... v-dropdown