title: dropdown menu changing position of list elements
body: <p>When I add a dropdown menu to my liquid navigation bar, all of the list elements are pushed down to the same level my dropdown menu ends.</p>
  
  <p>How do I fix this ?</p>
  
  <p>See <a href="https://jsfiddle.net/pgdjtezu/3/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav id='menu'&gt;     
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=''&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=''&gt;categories&lt;/a&gt;
                  &lt;ul id='hidden-list'&gt;
                      &lt;li&gt;&lt;a href=''&gt;test 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=''&gt;test 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=''&gt;test 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=''&gt;test 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=''&gt;donate&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=''&gt;contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=''&gt;about&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*{
      font-size:14px;
      font-family:arial;
  }
  #menu {
      text-align:center;
      list-style-type: none;
  }
  
  #menu li{
      margin-top:10px;
      display:inline-block;
      margin-right:2.5%;
      margin-left:2.5%;
  }
  
  #menu li a {
      text-decoration: none;
      font-family:arial;
      font-size:300%;
      color:gold;
  }
  
  #menu li a:hover{
      color:black;
  }
  
  #hidden-list {
      padding:0;
      margin:0;
      visibility: hidden;
      width:200px;
  }
  
  #hidden-list li a {
      color:black;
      font-size:200%;
  }
  
  #hidden-list li a:hover {
      color:gold;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
              $('html').animate({ opacity: 1 }, { duration: 4000 });
              $('ul li:nth-child(2) a').mouseenter(function() {
                  $('#hidden-list').css('visibility', 'visible');
              });
              $('#hidden-list').mouseleave(function() {
                  $('#hidden-list').css('visibility', 'hidden');
              });
  });
  </code></pre>