jQuery slideToggle перемещает элементы навигации неуместно

Question

Привет, я пытаюсь создать раскрывающееся меню с помощью jQuery, я использую функцию slideToggle, чтобы закрыть предыдущее меню при следующем нажатии. Однако, когда я нажимаю элемент навигации, другие элементы, похоже, опускаются примерно на 20px.

Я не уверен на 100%, почему это происходит, было бы признательно, если бы кто-нибудь мог сказать мне, где я ошибся. Заранее спасибо.

Мой код ниже или посмотреть jsFiddle

JS/js.js

$('.nav_parent h5').click(function() { 
    $(this).next('.nav_child').slideToggle(); 
    $(this).parent().siblings().children().next().slideUp(); 
    return false; 
}); 

index.html

<div class="container"> 
    <ul id="header_nav"> 
     <li class="nav_parent"> 
      <h5>Reports</h5> 

      <ul class="nav_child"> 
       <li><a href="#" class="mnavlink">Download CSV</a> 
       </li> 
      </ul> 
     </li> 
     <li class="nav_parent"> 
      <h5>Build</h5> 

      <ul class="nav_child"> 
       <li><a href="#" class="mnavlink">Build new site</a> 
       </li> 
      </ul> 
     </li> 
     <li class="nav_parent"> 
      <h5>Subscriptions</h5> 

      <ul class="nav_child"> 
       <li><a href="#" class="mnavlink">E-Briefings</a> 
       </li> 
      </ul> 
     </li> 
     <li class="nav_parent"> 
      <h5>Media Store</h5> 

      <ul class="nav_child"> 
       <li><a href="#" class="mnavlink">Image Store</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS/style.css

.nav_parent { 
    display:inline-block; 
    width:24%; 
    background:#FCCC5F; 
} 
.nav_parent h5:hover { 
    background:#FCE49D; 
} 
.nav_child { 
    display:none; 
} 
.nav_child li { 
    line-height:30px; 
} 
.nav_child li:hover { 
    background:#FCE49D; 
} 

Answer 1

У вас проблема в вашем c песчаники Изменить на:

.nav_parent { 
    display:block; 
    float: left; 
    width:24%; 
    background:#FCCC5F; 
} 

http://jsfiddle.net/uCaQ2/ скрипку