드롭 다운 메뉴 애니메이션은 두 번째 마우스를 올리면 적용됩니까?

Question

현재 호버에서 활성화 된 드롭 다운 메뉴가 있습니다 (CSS에서 표시 : 없음에서 표시 : 블록까지). 그러나 첫 번째 호버에서는 드롭 다운 메뉴가 애니메이션으로 표시되지 않고 (즉, 순간적으로 표시됨) 두 번째 호버에서 Jquery의 슬라이드를 아래로 내리고 슬라이드 업이 제대로 수행되므로 CSS가 Jquery보다 먼저 수행되는 것으로 보입니다. Jquery가 첫 번째 호버에 적용되는 이유는 무엇입니까? 나는이 줄을 추가하는 해결책을 발견했다. $ ('. nav ul li ul') .css ('display', 'block'). slideUp (0); | Jquery는 문제를 해결하지만 나에게 도움이되지는 않습니다 ... 중복으로 부담하십시오. 제가 배우는대로 이것을 배우고 있습니다. 여기

은 메뉴에 대한 HTML입니다 :

<ul class="nav"> 
    <li><a href="#">...</a></li> 
    <li><a href="#">Dropdown1</a> 
     <ul> 
      <li><a href="#">...</a></li> 
      <li><a href="#">...</a></li> 
      <li><a href="#">...</a></li> 
      <li><a href="#">...</a></li> 
      <li><a href="#">...</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Dropdown2</a> 
     <ul> 
      <li><a href="#">...</a></li> 
      <li><a href="#">...</a></li> 
      <li><a href="#">...</a></li> 
      <li><a href="#">...</a></li> 
     </ul> 
    </li> 
    <li><a href="#">...</a></li> 
    <li><a href="#">...</a></li> 
</ul> 

내 CSS :

.nav { 
font-family: FrutigerLTStd-Roman, Trebuchet MS, Helvetica, Arial, sans-serif; 
font-size:16px; 
font-style: none; 
font-weight: normal; 
margin:0; 
list-style:none; 
padding:0px 0px 0px 0px; 
z-index:600; 
text-align:center; 
clear: both; 
box-shadow: 0px 3px 3px 0px #888 
background-clip: padding; 
} 
.nav a{ 
color:#FFF 
background:#629ec4; 
display: block; 
font-weight: bold; 
margin:0 0 0 0; 
target-new:tab; 
} 
.nav li{ 
background:#629ec4; 
margin:1px 0 1px 0; 
border-top:0px solid; 
border-right:0px solid; 
border-bottom:0px solid; 
z-index: 600; 
float:left; 
} 
.nav li a:hover{ 
color:#0072bb; 
} 

.nav li ul{ 
list-style:none; 
display:none; 
position:relative; 
z-index: 700; 
background-color:#629ec4 
} 

.nav li:hover ul{ 
display:block; 
border-top:2px solid; 
} 

.nav li:hover ul li { 
clear:left; 
} 

.nav ul li:hover a{ 
color:#0072bb; 
opacity: 1; 
} 

내 JQuery와 :

$(document).ready(function() { 
    $('.nav ul li ul').css('display','block').slideUp(0); 
    $('.nav li').hover(
    function() { 
     //show its submenu 
     $('ul', this).slideDown(300); 
    }, 
    function() { 
     //hide its submenu 
     $('ul', this).slideUp(300);   
    } 
); 
}); 

Answer 1

나는 그러나, 당신이 설명한 문제를 복제 할 수 없습니다 , 내가 설명한 문제를 해결하기 위해 몇 가지 수정을했습니다.

추가 된 클래스는 ul을 드롭 다운합니다 :

<li><a href="#">Dropdown1</a> 
    <ul class="dropdown"> 
    ... 

업데이트 CSS :

.nav { 
    font-family: FrutigerLTStd-Roman, Trebuchet MS, Helvetica, Arial, sans-serif; 
    font-size:16px; 
    font-style: none; 
    font-weight: normal; 
    margin:0; 
    list-style:none; 
    padding:0px 0px 0px 0px; 
    z-index:600; 
    text-align:center; 
    clear: both; 
    box-shadow: 0px 3px 3px 0px #888; 
    background-clip: padding; 
} 
.nav a{ 
    color:#FFF; 
    background:#629ec4; 
    display: block; 
    font-weight: bold; 
    margin:0 0 0 0; 
    target-new:tab; 
} 
.nav li{ 
    background:#629ec4; 
    margin:1px 0 1px 0; 
    border-top:0px solid; 
    border-right:0px solid; 
    border-bottom:0px solid; 
    z-index: 600; 
    float:left; 
} 

.nav li a { 
    padding: 0 15px 0 15px; 
} 

.nav li a:hover{ 
    background:#0072bb; 
    color: #fff;  
} 
.nav li:hover .dropdown { 
    display:block; 
    border-top:1px solid; 
} 
.dropdown { 
    list-style:none; 
    display:none; 
    position:relative; 
    z-index: 700; 
    background-color:#629ec4; 
} 
.dropdown li { 
    clear: both; 
    display: block; 
    width: 100%; 
} 
.dropdown li:hover a{ 
    background:#0072bb; 
    color: #fff; 
    opacity: 1; 
} 

근무 솔루션 (설명을 위해 약간의 수정) : JSFIDDLE