Переключение элемента с помощью JQuery делает часть родительского элемента dissapear

Question

Я пытаюсь создать навигационную панель с jquery, довольно просто, щелкнув значок nav, появляется меню сбоку, однако мне нужно подменю для появляются после нажатия одной из опций, в этом случае вкладка «Оборудование, которую мы продаем». У меня нет проблем с этим, когда я нажимаю вкладку, и она переключает меню на видимое, однако все вкладки ниже этого становятся невидимыми (я предполагаю, что они не перемещаются ниже под видимым теперь элементом). Может кто-нибудь объяснить мне, почему вкладки не освобождают место для новых элементов списка. Код ниже.

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