0

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/

Minal Chauhan
  • 5,739
  • 5
  • 15
  • 36
martin j
  • 121
  • 1
  • 12
  • There are no parent-selectors in CSS, so selecting a parent element based on its children, or the state of its children, will not work (under current CSS). This functionality can be implemented with JavaScript (or its libraries) however. – David says reinstate Monica Nov 19 '16 at 10:19
  • @DavidThomas heres an example that sais otherwise http://stackoverflow.com/questions/8622611/when-hovering-a-css-list-item-change-the-parent-items-css – martin j Nov 19 '16 at 10:22
  • No it doesn't; it says that hovering over a link can show ('un-hide') the adjacent sibling element; which is absolutely within the capacity of CSS. Whereas what you're trying to do is select the parent-element of a ` – David says reinstate Monica Nov 19 '16 at 10:25

0 Answers0