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

綁定的事件父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 
);