I have looked on other examples on stack but the solutions I've found doesn't work. In my navigation bar I have a drop menu where I want the parent to be in a specific color when I hover the child (the menu that drops). but for some reason I cant get it to work.
.drop-menu ul li a:hover,
.nav li a:hover {
box-shadow: inset 5px 0 0 #e3382d, inset 6px 0 0 #222 !important;
background: #1f2125 !important;
color:#e3382d !important;
}
<ul>
<li class="drop" style="border-top:1px solid #080e11;">
<a style="cursor: pointer;">Social</a>
<div class="drop-menu">
<ul>
<li>
<a href="//"> <?=echoSelectedClassIfRequestMatches("forum")?>>Forum</a>
</li>
<li>
<a href="//"> <?=echoSelectedClassIfRequestMatches("live")?>>Live</a>
</li>
</ul>
</div>
</li>
</ul>
Between a:hover
and .nav
I have placed a ,
this was just to check that both would change color and inline when I hovered it (to make sure that I had the right classes).
Heres a fiddle link: https://jsfiddle.net/vfbyv83k/