不要更改子悬停时的父属性

Question

我已经在堆栈上查看了其他示例，但我发现的解决方案不起作用。在我的导航栏中，我有一个下拉菜单，我希望父母在我将鼠标悬停在特定的颜色时（丢弃的菜单）。但由于某种原因，我无法让它发挥作用。

.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>

在a:hover和.nav之间我已经放置了,这只是为了检查两者是否会在我徘徊时改变颜色和内联（以确保我有正确的类）。

这是一个小提琴链接： https://jsfiddle.net/vfbyv83k/