클릭시 CSS 드롭 다운이 닫히지 않음

Question

사용자가 하위 항목 중 하나를 클릭 할 때 내 드롭 다운이 닫히지 않기 때문에 내가 잘못한 것을 암시 할 수 있기를 바랍니다. 밖에서 아무 곳이나 클릭 할 때까지 열려 있습니다. http://prestigetrips.com/pricklybay/

: 여기

사이트의 발전에 링크입니다), 그것은 CSS와 JQuery와에 올 때

나는, 너무 너무 열심히 날하지 마십시오 여전히 매우 초보입니다

"마리나"위로 마우스를 가져 가면 드롭 다운입니다. 여기

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

그리고 slideUp/slideDown에 대한 내 자바 스크립트 :

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