Is it possible to adjust the hover effects to cover the full width of the dropdown menu and change the text color when hovering over the li element instead of the a element?
The desired effect is a black dropdown menu where, upon hovering over each link, the background of the li should change to rgba(255,255,255, 0.1) and the text color should change to rgba(102,245,66, 0.8). The li and a elements should not extend beyond the normal dropdown section.
.dropdown-content {
display: none;
position: absolute;
background-color: #1c1c1c;
min-width: 240px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
height: 300px;
position: absolute;
right: 0;
top: 100;
}
ul {
list-style: none;
overflow: hidden;
}
li {
font-size: 1em;
text-align: center;
padding-top: .5em;
height: 75px;
width: 240px;
overflow: hidden;
}
a {
color: #fff;
text-decoration: none;
font-size: 2rem;
font-family: $main-font;
width: 240px;
}
a:hover {
color: rgba(102, 245, 66, 0.8);
}
li:hover {
background: rgba(255, 255, 255, .2);
color: #8FC3A1;
width: 240px;
cursor: pointer;
}
.dropdown:hover .dropdown-content {
display: block;
}<div class="dropdown">
<span><i class="fa fa-bars">Just hover on it</i></span>
<div class="dropdown-content">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#lin">Line Up</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>