CSS下拉式不點擊關閉

Question

我希望你能幫我提示我做錯了什麼，因爲當用戶點擊其中一個子項時，我的下拉菜單不會關閉。它只是保持打開，直到你點擊任何地方以外。

我還是相當新手當談到CSS和jQuery，所以請不要對我太硬;）

這裏是一個網站的發展鏈接： http://prestigetrips.com/pricklybay/

當您將鼠標懸停在「Marina」上時，這是下拉菜單。

這裏是我的CSS：（？我想我要在這裏補充一下，使菜單收盤點擊）

#mainnav { 
    position: fixed; 
    width: 700px; 
    height: 44px; 
    margin-top: 40px; 
    float: right; 
    right:0; 
    box-sizing:border-box; 
    text-transform:uppercase; 
    font-size: 0.85em; 
    z-index: 100; 
} 
#mainnav ul { 
    float:right; 
    width:100%; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
} 
#mainnav ul li a { 
    float:right; 
    margin-right: 0; 
} 
#mainnav ul > li:first-child a{ 
    float:right; 
    margin-right: 0; 
} 

#mainnav ul ul { 
    display: none; 
} 

#mainnav ul li:hover > ul { 
    display: block; 
} 

#mainnav ul ul { 
    background: rgb(88,38,125); 
    opacity: 0.9; 
    -webkit-opacity: 0.9; 
    -moz-opacity: 0.9; 
    border-radius: 0px; 
    position: absolute; 
    top: 44px; 
    left: 0px; 
    width:250px; 
} 
#mainnav ul ul li { 
    float: left; 
    border-top: none; 
    position: relative; 
    border-bottom: 1px dotted #B6A0C1; 
    width: 100%; 
    color: rgb(234,222,239); 
} 
#mainnav ul ul li:last-child{ 
    border-bottom: none; 
} 
#mainnav ul ul li a { 
    color: rgb(223,207,231); 
    float:left; 
    text-decoration:none; 
    padding: 22px 12px 22px 90px; 
} 
#mainnav ul ul li:first-child a{ 
    float:left; 
    margin-right: 0; 
} 
#mainnav ul ul li:hover{ 
    margin-right: 0; 
} 
#mainnav ul ul.dropdown li:nth-child(2) hover + li { 
    margin-right: 0; 
    border-bottom: 1px dotted #B6A0C1; 
} 
#mainnav ul ul li a:hover { 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    color: #fff; 
} 
#mainnav ul ul li:hover { 
    background: rgba(123,73,146,0.9); 
    padding:0; 
    padding-bottom: 1px; 
    border: none; 
} 
#mainnav ul li.active > a, #mainnav ul li.active { 
    pointer-events: none; 
    cursor: default; 
} 

而且我對效果基本show /了slideDown的javascript：

$(document).ready(function(){ 
     $('#mainnav li').hover(function(){ 
      $('ul', this).slideUp(0).stop(true, true).slideDown(300); 
     }, 

     function(){ 
      $('.dropdown', this).css("display", "block").stop(true, true).delay(50).slideUp(300); 
     }); 

    }); 

我希望你能幫助我，謝謝大家！

Answer 1

因爲沒有處理程序下拉

$(document).ready(function() { 
    $('#mainnav li').hover(function() { 
     $('ul', this).slideUp(0).stop(true, true).slideDown(300); 
    }, function() { 
     $('.dropdown', this).css("display", "block").stop(true, true).delay(50).slideUp(300); 
    }); 

    //hide it on click 
    $('#mainnav ul ul li').click(function() { 
     $(this).closest('.dropdown').css("display", "block").stop(true, true).delay(50).slideUp(300); 
    }) 
});