title: jQuery - Horizontal + vertical navbar
body: <p>I'm trying to achieve the result of the following blueprints:</p>
  
  <p><img src="https://i.stack.imgur.com/xa4S5.jpg" alt="Blueprints"></p>
  
  <p>Sadly, I'm very new to JavaScript and jQuery, so I'd need some help.</p>
  
  <p>The idea is that the vertical nav/slider, <br>
  follows your cursor, <br>
  when hovering over the horizontal navbars links, <br>
  revealing sub-links, like a dropdown menu.<br></p>
  
  <p>I'm not asking you to do the whole job for me,
  but maybe give me a few tips and tell me how to get started?</p>
  
  <h2>Experimental Fiddle of HTML and CSS</h2>
  
  <p>CODE:</p>
  
  <h2>HTML</h2>
  
  <pre><code>  &lt;section class="container"&gt;
    &lt;div class="fs-nav-vr"&gt;
    &lt;ul&gt;
    &lt;li&gt;Linkki&lt;/li&gt;
    &lt;li&gt;Hinkki&lt;/li&gt;
    &lt;li&gt;Sinkki&lt;/li&gt;
    &lt;/div&gt;
    &lt;div class="pusher"&gt;&lt;/div&gt;
     &lt;section class="sc-nav"&gt;
  &lt;div class="fs-nav"&gt;
  &lt;nav&gt;
      &lt;div onclick=" window.location = 'http://google.com'"&gt;
          &lt;a &gt;Linkki&lt;/a&gt;
      &lt;/div&gt;&lt;div&gt;
          &lt;a href="#"&gt;Hinkki&lt;/a&gt;
      &lt;/div&gt;&lt;div&gt;
          &lt;a href="#"&gt;Sinkki&lt;/a&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  
    &lt;/section&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.fs-nav-vr {
      display: block;
      top: 0;
      height: 100%;
      width: 10%;
      padding: 0;
      margin: 0;
      opacity: 0.6;
      z-index: 2;
      left: 15%;
      background: red;
      position: absolute;
  }
  .fs-nav {
      height: 15%;
      display: block;
      width: 100%;
      top: 65%;
      padding: 0;
      margin: 0;
      color: relative;
      text-align:center;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.17, rgb(61, 61, 61)), color-stop(0.66, rgb(87, 84, 87)));
      background-image: -o-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
      background-image: -moz-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
      background-image: -webkit-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
      background-image: -ms-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
      background-image: linear-gradient(to bottom, rgb(61, 61, 61, 0.7) 17%, rgb(87, 84, 87) 66%);
      opacity: 0.8;
      overflow: hidden;
  }
  .fs-nav nav div {
      display: inline-block;
      text-align:center;
      cursor: pointer;
      border: solid 1px gray;
      padding: 2%;
      margin: 0;
      font-size: 40px;
      background-color: #999999;
      -webkit-transition: background-color 0.2s ease-in-out;
      -moz-transition: background-color 0.2s ease-in-out;
      -ms-transition: background-color 0.2s ease-in-out;
      -o-transition: background-color 0.2s ease-in-out;
      transition: background-color 0.2s ease-in-out;
  }
  </code></pre>