title: Hover box position issue
body: <p>I have a great(for me) problem</p>
  
  <p>I'm building a website, trying to make a category top bar with a box showing downside of text on hover.</p>
  
  <p>But when I hover on the category name, appearing box makes the categories go down.</p>
  
  <p>How to make them stay up, and just make box going down overlapping content?</p>
  
  <p>I have the following code:  <a href="https://jsfiddle.net/oqshbxge/" rel="nofollow noreferrer">https://jsfiddle.net/oqshbxge/</a></p>
  
  <pre><code>    &lt;div id="categories"&gt;
                  &lt;div class="top-category"&gt;  &lt;a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/syntezatory-modularne"&gt;Syntezatory Modularne&lt;/a&gt;
      &lt;div class="hover-box-outline"&gt;
          &lt;a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/syntezatory-modularne"&gt;Syntezatory Modularne&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="divider-15"&gt;&lt;/div&gt;
  &lt;div class="top-category"&gt;  &lt;a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/automaty-perkusyjne"&gt;Automaty perkusyjne&lt;/a&gt;
      &lt;div class="hover-box-outline"&gt;
          &lt;a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/automaty-perkusyjne"&gt;Automaty perkusyjne&lt;/a&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="divider-15"&gt;&lt;/div&gt;
  
  &lt;div class="top-category"&gt;  &lt;a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sprzet-studyjny"&gt;Sprzęt Studyjny&lt;/a&gt;
      &lt;div class="hover-box-outline"&gt;
          &lt;a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sprzet-studyjny"&gt;Sprzęt Studyjny&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="divider-15"&gt;&lt;/div&gt;
  
  &lt;div class="top-category"&gt;  &lt;a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/syntezatory"&gt;Syntezatory&lt;/a&gt;
      &lt;div class="hover-box-outline"&gt;
          &lt;a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/syntezatory"&gt;Syntezatory&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="divider-15"&gt;&lt;/div&gt;
  
  &lt;div class="top-category"&gt;  &lt;a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sekwencery"&gt;Sekwencery&lt;/a&gt;
      &lt;div class="hover-box-outline"&gt;
          &lt;a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sekwencery"&gt;Sekwencery&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="divider-15"&gt;&lt;/div&gt;
  
  &lt;div class="top-category"&gt;  &lt;a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/kable"&gt;Kable&lt;/a&gt;
      &lt;div class="hover-box-outline"&gt;
          &lt;a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/kable"&gt;Kable&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="divider-15"&gt;&lt;/div&gt;
  
  &lt;div class="top-category"&gt;  &lt;a class="top-category-link noka uppercase" href="http://mode-m.pl/kategoria/sprzet-gitarowy"&gt;Sprzęt Gitarowy&lt;/a&gt;
      &lt;div class="hover-box-outline"&gt;
          &lt;a class="hover-box-category-top noka uppercase" href="http://mode-m.pl/kategoria/sprzet-gitarowy"&gt;Sprzęt Gitarowy&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;          &lt;/div&gt;
  </code></pre>
  
  <p>with css:</p>
  
  <pre><code>    .top-category {
      display: inline-block;
  }
  
  .top-category-link {
      color: #1a1a1a;
      font-size: 10pt;
      transition: text-shadow 0.5s, color 0.5s, font-size 0.5s;
  }
  
  .top-category:hover &gt; a{
      color: white;
      text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
      font-size: 15pt;
  }
  
  .top-category:hover &gt; .hover-box-outline {
      display: block;
  }
  
  .hover-box-outline {
      border: 1px solid;
      background-color: rgba(255,255,255,0.75);
      width: auto;
      display: none;
      margin-top: 25px;
  }
  
  .hover-box-category-top {
      color: #1a1a1a;
  }
  
  .divider-15{
      width: 15px;
      display: inline-block;
  }
  </code></pre>