выпадающее меню, изменяющее положение элементов списка

Question

Когда я добавляю раскрывающееся меню в панель навигации с жидкостью, все элементы списка вытесняются до того уровня, на котором заканчивается мое раскрывающееся меню.

Как исправить это?

См jsfiddle

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

Answer 1

Вы пытались использовать position: absolute;? Он примет элемент «из потока» страницы, так что он не повлияет на другие элементы.

Answer 2

Необходимо изменить CSS: position: absolute; это свойство Определить метод позиционирования, используемый для элемента (статический, относительный, абсолютный или фиксированный).