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); 
    }) 
});