SlideToggle оказывает противоположное влияние на раскрывающееся меню Bootstrap

Question

Я пытаюсь создать меню выпадающего меню с помощью SlideToggle с Twitter Bootstrap с помощью метода SlideToggle в jQuery, но поведение, которое я хочу, является полной противоположностью тому, что я хочу. Он должен просто скользить вниз при наведении курсора и перемещаться по мыши.

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#about">Company</a> 

        <ul class="sub-menu"> 
         <li><a href="http://sc-arch.com/company/">About Us</a> 
         </li> 
         <li><a href="http://sc-arch.com/media/">Media</a> 
         </li> 
         <li><a href="http://sc-arch.com/brochures/">Brochures</a> 
         </li> 
         <li><a href="http://sc-arch.com/news-events/">News &amp; Events</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#services">Services</a> 
       </li> 
       <li><a href="#contact">Projects</a> 

        <ul class="sub-menu"> 
         <li><a href="http://sc-arch.com/project-category/addition-renovation/">Addition/ Renovation</a> 
         </li> 
         <li><a href="http://sc-arch.com/project-category/civiccommunity/">Civic/Community</a> 
         </li> 
         <li><a href="http://sc-arch.com/project-category/education-collegeuniversity/">Education: College/University</a> 
         </li> 
         <li><a href="http://sc-arch.com/project-category/education-k-12/">Education: K – 12</a> 
         </li> 
         <li><a href="http://sc-arch.com/project-category/historical/">Historical</a> 
         </li> 
         <li><a href="http://sc-arch.com/project-category/in-planning/">In Planning</a> 
         </li> 
         <li><a href="http://sc-arch.com/project-category/interior-architecture/">Interior Architecture</a> 
         </li> 
         <li><a href="http://sc-arch.com/project-category/leed/">LEED</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#about">Clients</a> 
       </li> 
       <li><a href="#services">Philosophy</a> 
       </li> 
       <li><a href="#contact">Awards</a> 
       </li> 
       <li><a href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

CSS:

import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

body { 
    margin-top: 60px; 
    background-color: #000; 
    font-family: Calibri, Arial, sans-serif; 
} 
.navbar { 
    height: 100px; 
} 
.navbar-inverse { 
    background-color: #000; 
} 
.navbar-brand { 
    background-image: url(../assets/logo.png); 
    background-repeat: no-repeat; 
    width: 188px; 
    text-indent: -9999px; 
} 
.navbar-nav { 
    float:right; 
} 
.navbar-nav > li { 
    display: inline-block; 
    float: left; 
} 
.navbar-nav ul { 
    display: none; 
    position: absolute; 
    color: #fff; 
    list-style-type: none; 
    background-color: rgba(0, 0, 0, 1); 
    white-space: nowrap; 
} 
.navbar-nav li:hover ul { 
    display: block; 
} 
.navbar-nav li ul li a:hover { 
    text-decoration: none; 
    color: #fff; 
} 
.navbar-nav a { 
    color: #999; 
} 

JQuery:

$('.navbar-nav li').hover(function() { 
    $(this).toggleClass('current').find('ul').stop().slideToggle('fast'); 
}); 

Fiddle

Answer 1

я думаю, что Вы должны удалить этот CSS

.navbar-nav li:hover ul { 
    display: block; 
} 

и он должен работать правильно;)

он работает, как это на парения CSS добавляет дисплей: блок к этому ул и затем Вы используете slideToggle() метод, и он удаляет дисплей: блок thta почему он прячется на парении

пример http://jsfiddle.net/tN7KA/

для безопасной электронной ffect использовать этот скрипт:

$('.navbar-nav li').hover(function() { 
    $(this).addClass('current').find('ul').slideDown('slow') 
     },function() { 
      $(this).removeClass('current').find('ul').slideUp(); 
    });