오버플로가있는 호버 드롭 다운

Question

그래서이 드롭 다운 메뉴가 있습니다. 링크 위로 마우스를 가져 가면 드롭 다운 메뉴가 자동으로 오버플로되어 나타납니다. 내 문제는 바로 아래쪽 링크 위로 마우스를 이동하거나 스크롤하려고 할 때 호버가 멈추고 블록이 높이 한계에 도달하는 것처럼 사라지는 것입니다. 그것은 크롬과 파이어 폭스에서 이것을하지만, 일종의 IE8에서 잘 작동합니다. 이 문제를 해결하기 위해 내가 할 수있는 것에 대한 제안? 여기에 내 코드입니다 :

CSS

*{margin:0px; padding:0px} 
#container{background-color:pink;padding:30px;width:300px;} 
#dropMenu{display: none; 
    height: 75px; 
    overflow: auto; 
    width: 200px;} 

HTML

<div class="container"> 
    <a href="#" onMouseOver="menuOpen()">Hover This</a> 
    <div id="dropMenu"> 
     <a href="#">Menu Item1</a><br /> 
     <a href="#">Menu Item2</a><br /> 
     <a href="#">Menu Item3</a><br /> 
     <a href="#">Menu Item4</a><br /> 
     <a href="#">Menu Item5</a><br /> 
     <a href="#">Menu Item6</a><br /> 
    </div> 
</div> 

스크립트

<script type="text/javascript"> 
    function menuOpen(){ 
     document.getElementById('dropMenu').style.display = 'block'; 
    } 

    document.getElementById('dropMenu').onmouseout = function (e) { 
     e = e || window.event; 
     var target = e.srcElement||e.target; 
     if (target.id == "dropMenu") { 
      document.getElementById('dropMenu').style.display = 'none'; 
     } 
    }; 
</script> 

내가 질문에, 내 CSS가 어울리는 스타일 태그에 내 헤더에 가정 들어가기 전에, div는 본문에 있고 스크립트는 끝 본문 태그 앞에 있습니다.

Answer 1

당신이 대신 링크의 핑크 컨테이너 위에 마우스를 올려 때 메뉴가 아래로 떨어질 것을 생각하지 않는 경우, 당신은이 CSS 전용 솔루션을 사용할 수 있습니다

*{margin:0px; padding:0px} 

#container{background-color:pink;padding:30px;width:300px;} 

#dropMenu{display: none; 
    height: 75px; 
    overflow: auto; 
    width: 200px;} 

#container:hover #dropMenu { 
    display:block; 
} 

없음 자바 스크립트를 필요로합니다. 더 깨끗하고 효과적입니다. 내 예를 jsFiddle에서 살펴보십시오.