将鼠标悬停在绝对元素上时更改相对元素

Question

*
{
  margin: 0;
  padding: 0;
  
  list-style: none;
}

.navigation-menu
{
  display: flex;
  justify-content: space-around;
  background: #181818;
}
  
.navigation-menu li
{
  position: relative;
}

.navigation-menu li:hover .dropdown-menu
{
  display: block;
}

.navigation-menu a
{
  padding: 15px;
  text-decoration: none;
  color: #ffffff;
  display: block;
  text-transform: uppercase;
  font-family: arial;
  transition: .2s;
  font-weight: 600;
}

.navigation-menu a:hover
{
    background: #ffcc00;
    color: #181818;
}

.dropdown-menu
{
    position: absolute;
    top: 48px;
    left: 0;
    display: none;

    background: #181818;
}

<ul class="navigation-menu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#" class="dropdown-link">Social</a>
        <ul class="dropdown-menu">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
</ul>

我怎么能做那样的东西？i、 e当我在绝对下拉菜单上悬停时，相对下拉链接应该应用下面的样式。

.dropdown-menu:hover .dropdown-link
{
    background: #ffcc00;
    color: #181818;
}

还是只通过js求解？救救我。

我的同僚们都是精英。Facere，saepe，别这样！在别名处的发明者排斥物减去不可交换的最大非共和国劳动量（obcaecati odit omnis）？Ipsam、iusto dolorum dolorem voluptatem、建筑师ullam mollitia、面部劳损水平。

Answer 1

我认为您可以将悬停添加到包含的li中，并样式化直接后代。请参见代码段：

*
{
  margin: 0;
  padding: 0;
  
  list-style: none;
}

.navigation-menu
{
  display: flex;
  justify-content: space-around;
  background: #181818;
}
  
.navigation-menu li
{
  position: relative;
}

.navigation-menu li:hover .dropdown-menu
{
  display: block;
}

.navigation-menu a
{
  padding: 15px;
  text-decoration: none;
  color: #ffffff;
  display: block;
  text-transform: uppercase;
  font-family: arial;
  transition: .2s;
  font-weight: 600;
}

.navigation-menu a:hover
{
    background: #ffcc00;
    color: #181818;
}

.dropdown-menu
{
    position: absolute;
    top: 48px;
    left: 0;
    display: none;

    background: #181818;
}
/* add this: */
.navigation-item:hover > a {
    background: #ffcc00;
    color: #181818;
}

<ul class="navigation-menu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li class="navigation-item">
        <a href="#" class="dropdown-link">Social</a>
        <ul class="dropdown-menu">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
</ul>