jQueryスライダダウンが絶対位置なしにページを押し下げるのを防ぎます

Question

jqueryスライダダウンメニューを作成しようとしていますが、ページを押し下げています。私は絶対的な位置を使用することはできません。

ここには私が今持っているもののjsfiddleがあります。

ご意見やご提案は大変ありがとうございます。

Answer 1

一定の高さの容器にナビゲーションバーを入れてください。これにより、コンテンツの移動が防止されます。

<div class="navbar_container"> 
    <ul class="navbar">  
... 
    </ul> 
</div> 

.navbar_container { 
    height: 60px; 
} 

Example jsfiddle

メニューは、コンテンツ上に行きたい場合は、しかし、絶対位置を使用する必要があります。

Answer 2

が含むdivの使用：

<div class="navbarWrapper"> 
    <ul class="navbar">  
     <li class="link">Username 
      <div class="dropdown"> 
       <a href="#">Profile</a><br /> 
       <a href="#">Logout</a> 
      </div> 
     </li> 
    </ul> 
</div> 

を...そして、あなたのCSSに追加します。

.navbarWrapper 
{ 
    height: 1em; 
} 

.navbar 
{ 
    ... 
    position: absolute; 
    ... 
}