Jquery 드롭 다운 메뉴가 IE에서만 깜박임

Question

새 프로젝트에 대한 Jquery 드롭 다운 메뉴가 시작되며 Google 크롬, Firefox, Safari에서 예상대로 작동하지만 물론 Internet Explorer에서 두통을 느끼게합니다. 여기

이 일이, 는 IE에서 링크를 통해 이동할 때 당신이하지 않는, 배경의 일부가 깜박를 참조 드롭 다운 appers, 메뉴 홈을 통해 마우스에이 페이지 http://www.universidadedoingles.com.br/dev/index.ASP

를 참조하십시오 Chrome 및 기타에서 발생합니다.

여기에 dd 메뉴를 사용하는 js coda가 있습니다.

<script type="text/javascript"> 
$(document).ready(function() { 
$("ul.mainmenu li.menuhome").mouseover(function(){ 
    $(".arrow-spacer").show(); //When mouse over ... 
    //Following event is applied to the subnav itself (making height of subnav 150px) 
    $(this).find('.submenu').show().animate({height: '150px', opacity:'1'},{queue:false, duration:300})  
}); 

$("ul.mainmenu li.menuhome").mouseout(function(){ //When mouse out ... 
    //Following event is applied to the subnav itself (making height of subnav 0px) 
    $(this).find('.submenu').hide().animate({height:'0px', opacity:'0'},{queue:false, duration:200}) 
}); 

//menu itembackground color animation   
$("li").hover(function() { 
    $(this).animate();}, 
    function() { 
     $(".arrow-spacer").hide(); 
    }); 
}); 
</script> 

그건 간단 할 수도 있지만 몇 주일이 지났지 만 여전히 작동하지 않습니다.

고마워요.

Answer 1

앵커 <a> 태그에 여백이있는 것으로 나타났습니다. 내 첫 번째 일은 대신 패딩을 사용하는 것입니다. IE는 다른 브라우저와 마찬가지로 여백에서 호버링을 처리하지 않습니다.

Answer 2

어떤 경우에는 다른 요소의 맨 위에 배치해야하는 요소에 z-index을 설정하는 것이 좋습니다. 귀하의 경우에는

은 내가 z-index에 <ul class="submenu">

Answer 3

없음 깜박 더 이상 설정하려고 것입니다! 한 단어 hide()를 stop()으로 변경 했으므로 이제는 iE에서 깜박 거리지 않습니다. 그러나 ...

메뉴를 한 번 표시하면 링크 아래에서 마우스를 가져 오거나 링크를 닫을 때마다 메뉴가 다시 표시됩니다.

확인이

www.universidadedoingles.com.br/dev

당신은 이상 그 동작을

Answer 4

것은이 <li>에 포커스가 손실되는 때를 마우스를 볼 수 있습니다 <a> 요소 여기 이것을 극복하기 위해 사용할 수있는 방법이 있습니다. <a> 태그를 사용하는 대신 JavaScript 함수를 사용하여 사용자를 원하는 위치로 보냈습니다. 필자는 jQuery보다는 JavaScript를 사용하여 더 자명하다.

 <script type="text/javascript" src="jquery.js" ></script> 
     <script type='text/javascript'> 
     $(document).ready(function() { 
     $('#n li').hover(function() { 
       $('ul', this).slideDown(200); 
     $(this).children('a:first').addClass('h'); 
      }, function() { 
     $('ul', this).slideUp(200); 
     $(this).children('a:first').removeClass('h'); 
     }); 
     }); 
     function gotoPage(pnumber){ 
      var goto; 
      if(pnumber==1){ 
       goto="home.html"; 
      }else if(pnumber==2){ 
      goto="watsnew.html"; 
      }else if(pnumber==3){ 
       goto="aboutus.html"; 
      }else if(pnumber==4){ 
       goto="contactus.html"; 
      } 
      window.location.href=goto; 
     } 
</script> 

<style type="text/css"> 
#n { 
    padding: 0; 
    list-style: none; 
    padding-left: 15px; 
    padding-right: 15px; 
    width:5em; 
} 
#n li { 
    /*display:inline;*/ 
    background: none; 
    position: relative; 
    z-index: 1; 
    font-weight:bold; 
    margin: 0 auto; 
} 
#n li .h { 
    background-color: #fff; 
    border-left: 1px solid #CF3; 
    border-right: 1px solid #CF3; 
    color: #576482; 
    height:20px; } 
#n ul { 
    position: absolute; 
    display: none; 
    margin: 0; padding: 0; 
    list-style: none 
    padding-bottom: 3px; 
    width:200px; 
} 
#n ul li { 
    list-style-type:none; 
    padding:10px;} 
#n ul li:hover { 
    background:#960;} 

</style> 


<div> 
<ul id="n"> 
    <li>MENU 
     <ul > 
     <li value="1" onclick="gotoPage(this.value)">HOME</li> 
     <li value="2" onclick="gotoPage(this.value)">WATS NEW</li> 
     <li value="3" onclick="gotoPage(this.value)">ABOUT US</li> 
     <li value="4" onclick="gotoPage(this.value)">CONTACT US</li> 
     </ul> 
    </li> 
<ul> 
</div>