I think you are looking for this i m not pretty much sure, please do let me know if it fulfills you requirement, the solution is change color of a when we hover li
.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: 0;
z-index: 1;
height: 300px;
position: absolute;
right: 0;
left: 0;
}
ul {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}
li {
font-size: 1em;
text-align: center;
margin-bottom: 10px;
}
li:hover {
background: rgba(255,255,255, 0.1);
color: #8FC3A1;
cursor: pointer;
}
li:hover a{
color: rgba(102,245,66, 0.8)
}
a {
color: #fff;
text-decoration: none;
font-size: 2rem;
font-family: $main-font;
width: 240px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<span><i class="fa fa-bars">fa-bar dropdown</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>
How do I make it so that the hover effects are full width of the dropdown and so that the text changes colour on hovering on the li not the a.
So it should be a black dropdown menu, when each link is hovered on the background of the li should change to rgba(255,255,255, 0.1) and the text should change to rgba(102,245,66, 0.8) the li and a sections shouldn’t overflow the normal dropdown section (I tried overflow: hidden)
.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>
If not. then change a to {display: block;} and move all size defining props from li to a or use absolute full width a:before or a:after to fill full li element. If using bootstrap, then just change classes to fit bootstrap version usage standarts.
@andris not using bootstrap I tried changing it to display: block and moving all the size based stylings, it didn’t work.
