下拉菜單改變列表元素的位置

當我向液體導航欄添加一個下拉菜單時，所有列表元素都會下拉到相同的水平，我的下拉菜單結束。下拉菜單改變列表元素的位置

我該如何解決這個問題？

HTML

<nav id='menu'>  
     <ul> 
      <li><a href=''>home</a></li> 
      <li> 
       <a href=''>categories</a> 
       <ul id='hidden-list'> 
        <li><a href=''>test 1</a></li> 
        <li><a href=''>test 2</a></li> 
        <li><a href=''>test 3</a></li> 
        <li><a href=''>test 4</a></li> 
       </ul> 
      </li> 
      <li><a href=''>donate</a></li> 
      <li><a href=''>contact</a></li> 
      <li><a href=''>about</a></li> 
     </ul> 
</nav>

CSS

*{ 
    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; 
}

jQuery的

$(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'); 
      }); 
});

來源

2015-08-13 user23491594