When I created a ul inside a nav tag, I wanted to apply different background-color hover effects to different li elements. However, the hover effect is only being applied to the anchor tags and not the complete li elements.
The CSS properties that I have mentioned are as follows:
.main-menu .acc .fa-home,
.main-menu .acc>a:hover {
background-color: #689f38;
}
.main-menu .fa-laptop,
.main-menu li>a:hover {
background-color: #ed3b3b;
}
.main-menu .fa-list,
.main-menu .has-list>a:hover {
background-color: #ef6c00;
}The HTML structure with the classes for each li element is as follows:
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>