Hover + to different element is not working

Question

I found a problem with my navigation bar. Im using tag nav, ul, li for it. My intention is to make an image move according to the hover li. Not sure what is wrong with the css... I want to make the li:nth-child(3) to move position using 'top' when li:nth-child(1) is hovered.

Here is my html

<nav> <img class="nav_bar" src="images/navigation_stick.png">
            <ul class="subsection">

                <li class="subsection">Animation
                        <!--<h4 class="subsection">Modelling</h4>-->
                        <h4 class="subsection">Project</h4>
                        <!--<h4 class="subsection">Reel</h4>-->
                </li>


                <li class="subsection">Graphic 
                    <h4 class="subsection">Poster</h4>
                    <!--<h4 class="subsection">Illustration</h4>-->
                </li>

                <li>
                <img src="images/navigation_button.png">
                </li>

            </ul>
        </nav>

here is my css

li h4.subsection{
            font-size: 14px;
            font-weight: lighter;
            padding-top: 0;
            display: block;
            max-height: 0;
            opacity: 0;
            transition: visibility 0s,  padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
            transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
        }

        li:hover > h4{
            padding-top: 5px;
            max-height: 50px;
            opacity: 1;
        }

        li:nth-child(3){
            display: block;
            position: fixed;
            left: 92.92%;
            top: 100px;
            transition: all 1000ms ease;
        }

        li:nth-child(1):hover + li:nth-child(3){
            top: 300px;
        }

thanks for your kind help!

Answer 1

You need to use ~ instead of + in the selector. ~ is a "general sibling", where as + is the adjacent/next sibling selector. :nth-child(1) and :nth-child(3) are general siblings, not adjacent.

li h4.subsection {
  font-size: 14px;
  font-weight: lighter;
  padding-top: 0;
  display: block;
  max-height: 0;
  opacity: 0;
  transition: visibility 0s, padding 0.3s, max-height 0.3s, opacity 0.2s ease-in;
  transition: padding 0.3s, max-height 0.4s, opacity 0.2s ease-out;
}

li:hover > h4 {
  padding-top: 5px;
  max-height: 50px;
  opacity: 1;
}

li:nth-child(3) {
  display: block;
  position: fixed;
  left: 92.92%;
  top: 100px;
  transition: all 1000ms ease;
}

li:nth-child(1):hover ~ li:nth-child(3) {
  top: 300px;
}

<nav> <img class="nav_bar" src="images/navigation_stick.png">
  <ul class="subsection">

    <li class="subsection">Animation
      <!--<h4 class="subsection">Modelling</h4>-->
      <h4 class="subsection">Project</h4>
      <!--<h4 class="subsection">Reel</h4>-->
    </li>


    <li class="subsection">Graphic
      <h4 class="subsection">Poster</h4>
      <!--<h4 class="subsection">Illustration</h4>-->
    </li>

    <li>
      <img src="images/navigation_button.png">
    </li>

  </ul>
</nav>