jQuery выпадающее меню сползает вниз и вверх

Question

У меня проблема с моим выпадающим меню. Когда я наводил ссылку на ссылку, она опускается, и все в порядке, но когда я пытаюсь навести ссылку на ссылку в раскрывающемся меню, она растет, и она постоянно обновляется. Я пытаюсь исправить это с помощью stop (true, true), но проблема все еще существует. Если у кого-то есть идея, как это исправить?

HTML код:

<div class="navigation"> 
    <ul> 
     <li class="first"><a href="#">Home</a></li> 
     <li><a href="#">Women</a></li> 
     <li class="dropdown-container"> 
     <a href="#" class="fading">Men</a> 
      <div class="main-dropdown"> 
       <div class="dropdown-cols"> 
        <div class="dropdown-col"> 
        <a href="#" class="category-headline">Featured</a> 
         <ul> 
          <li><a href="#">New Arrivals</a></li> 
          <li><a href="#">Best sellers</a></li> 
          <li><a href="#">Sale</a></li>          
         </ul> 
        </div> <!-- end /.dropdown-col --> 
        <div class="dropdown-col"> 
        <a href="#" class="category-headline">Categories</a> 
         <ul> 
          <li><a href="#">All Clothing</a></li> 
          <li><a href="#">Accessories</a></li> 
          <li><a href="#">Basics</a></li> 
          <li><a href="#">Dresses</a></li> 
          <li><a href="#">Jackets</a></li> 
          <li><a href="#">Jeans</a></li> 
          <li><a href="#">Pants</a></li> 
          <li><a href="#">Shirts</a></li> 
          <li><a href="#">Sweaters</a></li> 
         </ul> 
        </div> <!-- end /.dropdown-col --> 
        <div class="dropdown-col"> 
        <a href="#" class="category-headline">Lookbooks</a> 
         <ul> 
          <li><a href="#">Spring 2014</a></li> 
          <li><a href="#">Summer 2014</a></li> 
         </ul> 
        </div> <!-- end /.dropdown-col --> 
       </div> <!-- end /.dropdown-cols --> 
       <div class="featured-add"> 
        <h1>Top Sale</h1> 
        <img src="images/featured-img.jpg" alt="featured" class="featured-image" /> 
       </div> <!-- end /.featured-add --> 
      </div> <!-- end /.main-dropdown --> 
     </li> <!-- end /.dropdown-container --> 
     <li><a href="#">Experience</a></li> 
    </ul> 
</div> <!-- end /.navigation --> 

Javascript Код:

$(document).ready(function() { 

$('.dropdown-container a.fading').hover(
     function(){ 
      $('.main-dropdown').stop(true, true).slideDown(200); 
     }, 
     function(){ 
      $('.main-dropdown').stop(true, true).slideUp(200); 
     } 
    ); 

}); 

CSS код:

.navigation { 
    position: relative; 
    margin: 0 auto; 
    width: 1080px; 
    text-align: center; 
    z-index: 97; 
} 

.navigation ul { 
    list-style-type: none; 
    list-style-image: none; 
    overflow: hidden; 
    text-align: center; 
    margin: 0 auto; 
} 

.navigation ul li.first a{ 
    display: block; 
    background: url(../images/icons/home-icon.png) no-repeat bottom; 
    width: 27px; 
    height: 30px; 
    text-indent: -99999px; 
    line-height: 40px; 
} 

.navigation > ul li { 
    display: inline-block; 
    margin: 0; 
    line-height: 1em; 
} 

.navigation > ul li.dropdown-container:hover > a { 
    background: url(../images/icons/dropdown-arrow.png) no-repeat bottom center; 
} 

.navigation > ul li.dropdown-container:hover > div.main-dropdown { 
    display: block; 
} 

.navigation > ul > li > a { 
    display: block; 
    position: relative; 
    margin: 0 35px; 
    height: 60px; 
    font-size: 18px; 
    color: #002d47; 
    line-height: 60px; 
    text-decoration: none; 
    z-index: 9999; 
} 

.navigation > ul li:first-child a { 
    margin-left: 0; 
} 

.main-dropdown { 
    display: none; 
    position: absolute; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    -ms-transform: translate(-50%, -0); 
    transform: translate(-50%, 0); 
    overflow: hidden; 
    padding: 20px; 
    top: 60px; 
    width: 1000px; 
    background: #fff; 
    border: 1px solid #d5d5d5; 
    z-index: 9998; 
} 

.dropdown-cols { 
    float: left; 
    margin-left: -20px; 
    padding-right: 20px; 
    width: 600px; 
} 

.dropdown-col { 
    float: left; 
    margin-left: 20px; 
    width: 180px; 
} 

.navigation ul li a.category-headline { 
    display: block; 
    padding: 10px; 
    font-size: 14px; 
    font-weight: 700; 
    color: #fff; 
    text-decoration: none; 
    background: #002d47; 
} 

.navigation ul li .dropdown-col ul { 
    padding: 0 0 15px; 
} 

.navigation ul li .dropdown-col ul li { 
    float: none; 
    display: block; 
} 

.navigation ul li .dropdown-col ul li a { 
    display: block; 
    padding: 0; 
    padding-left: 10px; 
    width: 100%; 
    height: auto; 
    font-size: 14px; 
    line-height: 30px; 
    color: #363636; 
    text-decoration: none; 
} 

.navigation ul li .dropdown-col ul li a:hover { 
    background: rgba(0, 45, 71, 0.5); 
} 

.featured-add { 
    float: left; 
    padding-left: 20px; 
    width: 300px; 
} 

.featured-add img.featured-image { 
    margin-bottom: 25px; 
    width: 100%; 
} 

.featured-add h1 { 
    font-size: 19px; 
    font-weight: bolder; 
    text-transform: uppercase; 
    color: #002d47; 
    margin-bottom: 25px; 
    text-align: left; 
} 

Вот jsfiddle, чтобы увидеть, где именно проблема.

Demo

Answer 1

См Updated Fiddle

$(document).ready(function() { 

$('.dropdown-container a.fading').hover(
    function(){ 
     $('.main-dropdown').stop(true, true).slideDown(200); 
    }, 

); 

}); 

Answer 2

пожалуйста, попробуйте это:

$(document).ready(function() { 

    $('.dropdown-container a.fading').hover(
      function(){ 
       $('.main-dropdown').stop(true, true).slideDown(200); 
      }, 
      function(){ 
       $('.main-dropdown').stop(true, true).slideUp(200); 
       return:false; 
      } 
     ); 

    }); 

DEMO

Answer 3

Bind это событие к родителю li.

DEMO

$('.dropdown-container a.fading').closest('li').hover(function() { 
    $('.main-dropdown').stop(true, true).slideDown(200); 
}, function() { 
    $('.main-dropdown').stop(true, true).slideUp(200); 
}); 

Answer 4

Вы можете сделать это только с CSS

.navigation > ul li .main-dropdown{ 
    display:none; 
} 
.navigation > ul li:hover .main-dropdown{ 
    display:block; 
} 

Demo

Answer 5

Обновленный ваш fiddle

модифицирована одной линии только

$('.dropdown-container').hover(
    // function 
);