title: Sidebar that appears when i hover it
body: <p>I would like to make my sidebar appear when i am overlapping it. I've tried that using css but it didn't work. How can i make it work?</p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;div class="body"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
      &lt;div class="bar-open"&gt;
      &lt;div class="bar" id="bar"&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;h1&gt;Hola&lt;/h1&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>.bar-open {
      position:absolute;
      float: left;
      width: 0.5%;
      height: 100%;
      visibility: hidden;
  }
  .bar {
      color: white;
      position:absolute;
      float: left;
      background-color: #F89406;
      width: 12%;
      height: 100%;
      display: none;
  }
  .bar-open:hover .bar {
      display: block;
      visibility: visible;
  }
  </code></pre>
  
  <p>Thank you in advanced!</p>