title: CSS ONLY - how to slide out menu on button hover?
body: <p>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:  <a href="https://jsfiddle.net/codingcodingcoding/tuhug8x8/" rel="nofollow noreferrer">https://jsfiddle.net/codingcodingcoding/tuhug8x8/</a></p>
  
  <p>html:</p>
  
  <pre><code>  &lt;span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"&gt; &lt;/span&gt;
    &lt;nav id="navigation"&gt;
      &lt;ul&gt;
        &lt;li&gt;home&lt;/li&gt;
        &lt;li&gt;home&lt;/li&gt;
        &lt;li&gt;home&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.icon:hover#navigation {
    left: 0;
  }
  
  .icon {
    left: 0px;
  }
  
  #navigation {
    position: fixed;
    width: 200px;
    height: 300px;
    background-color: red;
    top: 0;
    left: -200px;
  }
  </code></pre>