JQueryで要素をトグルすると、親要素の一部が消えてしまいます

Question

jqueryでナビゲーションバーを作成しようとしていますが、かなり簡単です。ナビゲーションアイコンをクリックするとメニューが表示されますが、サブメニューが必要ですいずれかのオプションをクリックした後に表示されます。この場合、「販売する機器」タブが表示されます。私はタブをクリックすると問題はありませんが、メニューが表示されるように切り替えると、その下にあるすべてのタブが非表示になります（現在表示されている要素の下に移動しないと仮定しています）。誰かがタブが新しい​​リスト要素のためのスペースを作らない理由を私に説明することはできますか？以下のコード。あなたは上から機器クラス/リスト項目をクリックしたときに

JScriptの

$('.icon-menu').click(function() { 

    $('.menu').animate({ 
    right: '0px' 
    }, 200); 
    $('.equipsell').hide(); 
}); 

$('.menu-exit').click(function() { 
    $('.menu').animate({ 
    right: '-285px' 
    }, 200); 
    $('.equipsell').hide(); 
}); 

$('.equipment').click(function() { 
    $('.equipsell').toggle(); 
}); 

HTML

<header> 
    <div class="menu"> 
    <img src="img/menu-exit.png" class="menu-exit" alt="Exit Button"> 
    <ul> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li class="equipment"><a href="#">Equipment We Sell</a></li> 
     <div class="equipsell"> 
      <li><a href="inventis_audio.html">Audiometers by Inventis</a></li> 
      <li><a href="inventis_middle.html">Middle Ear Analyzers by Inventis</a></li> 
      <li><a href="inventis_delfino.html">Delfino Video Otoscopes by Inventis</a></li> 
      <li><a href="inventis_daisy.html">Daisy by Inventis</a></li> 
      <li><a href="inventis_trumpet.html">Trumpet REM by Inventis</a></li> 
     </div> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 

    <div class="main-menu"> 
    <a href="index.php"><p>Test<br>Website</p></a> 
    <img src="img/bars.jpg" class="icon-menu" alt="Menu"> 
    </div> 

</header> 

は、だから、 "メニュー" クラスをダウン下げるが、ご連絡をカバーリストアイテム。

EDITは、CSSを含めるのを忘れていました。

CSS

/***** NAV *****/ 

    header { 
     background-color: #093; 
     padding-bottom: 5px; 
    } 

    header p { 
     display: inline-block; 
     font-size: 1.35em; 
     margin: 10px 0 5px 15px; 
     font-weight: bold; 
     padding: 2px; 
     border: 3px solid black; 
    } 

    header a { 
     color: black; 
    } 

    .icon-menu { 
     width: 35px; 
     height: 35px; 
     float: right; 
     margin: 20px 15px 0 0; 
     display: inline-block; 
    } 

    .menu { 
     background: #00882B; 
     right: -285px; 
     height: 100%; 
     position: fixed; 
     width: 285px; 
    } 

    .menu-exit { 
     width: 35px; 
     height: 35px; 
     margin-left: 48%; 
    } 

    .menu ul { 
     border-top: 1px solid #636363; 
     list-style: none; 
     text-align: center; 
     margin: 0; 
     padding: 0; 
    } 

    .menu li { 
     border-bottom: 1px solid #636363; 
     font-family: 'Open Sans', sans-serif; 
     line-height: 45px; 
     padding-bottom: 3px; 
     padding-left: 20px; 
     padding-top: 3px; 
     color: #000000; 
     font-size: 15px; 
     font-weight: 800; 
     text-transform: uppercase; 
    } 

    .menu a { 
     color: #000000; 
     font-size: 15px; 
     font-weight: 800; 
     text-decoration: none; 
     text-transform: uppercase; 
    } 

    .active-menu{ 
     position: absolute; 
    } 

    .equipsell{ 
     width: 285px; 
     position: fixed; 
    } 

    .equipsell li { 
     margin: 0; 
     padding: 0; 
     line-height: 2.5; 
     background-color: #c90; 
    } 

    .equipsell a{ 
     color: white; 
     padding: 0; 
     margin: 0; 
    } 

    .bottom-half li { 
     background-color: #00882B; 
    } 

    /***************/ 

Answer 1

クラス.equipsellを引き起こすfixedすべき位置を、定義された他の要素上の層に配置されます。

は、私は次のようになります期待される結果を作成するためのコードを推測：

.equipsell{ width: 285px; }

JSFiddle更新：https://jsfiddle.net/rc8br5oe/ CSSの位置に関する

より：http://www.w3schools.com/cssref/pr_class_position.asp