prevent child element from receiving parent's hover effect
You want list to have hover effect but not the submenu items:
<li>Company<img class="arrow-down" src="./images/navigate-arrows.png" alt="arrow down">
<div class="submenu-items">
<div>About</div>
<div>Careers</div>
<div>News</div>
<div>Events</div>
<div>Blog</div>
</div>
</li>
Offset child element to change color to black (instead of gray on the list):
.menu-items li:hover > .submenu-items {
color: black;
}
Comments
Post a Comment