CSS ONLY - how to slide out menu on button hover?

Question

I want the menu to slide out when I hover over a button. Somehow I it only works when I add the hover effect to the menu itself, not to a button. All I could find online was the same (hover effect was attached to the menu that should slide out, not a button). How can I implement that?
jsfiddle: https://jsfiddle.net/codingcodingcoding/tuhug8x8/

html:

  <span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>

  <nav id="navigation">

    <ul>

      <li>home</li>

      <li>home</li>

      <li>home</li>

    </ul>

  </nav>

css:

.icon:hover#navigation {

  left: 0;

}



.icon {

  left: 0px;

}



#navigation {

  position: fixed;

  width: 200px;

  height: 300px;

  background-color: red;

  top: 0;

  left: -200px;

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

html

<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
  <nav id="navigation">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
    </ul>
  </nav>

css:

.icon:hover + #navigation {
  left: 0;
}

.icon {
  left: 0px;
}

#navigation {
  position: fixed;
  width: 200px;
  height: 300px;
  background-color: red;
  top: 0;
  left: -200px;
}

Here, I have added just + selector olny.

CSS ONLY - how to slide out menu on button hover?

Sign up