Change relative element while hover on absolute element

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>

How can i make something like that? i.e when i hover on absolute dropdown-menu the relative dropdown-link should apply styles below.

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

Or it solves only by js? Help me.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, saepe impedit distinctio! Deleniti, quas id, quo ullam inventore repellendus delectus at alias unde minus adipisci consectetur ipsa aliquid maxime non nemo repudiandae labore obcaecati odit omnis? Ipsam, iste commodi laborum iusto dolorum dolorem voluptatem, architecto ullam mollitia, facilis laudantium vel.

Try this - https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a/5210074 — Endothermic_Dragon, Jan 19 '21 at 17:57

score 1 · Accepted Answer · answered Jan 19 '21 at 17:57

I think you can just add hover to the containing li and style the direct descendant a. See snippet:

*
{
  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>

Change relative element while hover on absolute element

1 Answers1