2012-01-30 2 views
2

Итак, у меня есть это выпадающее меню, когда вы наводите указатель мыши на ссылку, выпадающее меню появляется с переполнением как автоматически. Моя проблема заключается в том, что, как только я надену мышь на нижнюю ссылку или попробую ее прокрутить, наведение останавливается, и блок исчезает, как и до предела его высоты. Он делает это в Chrome и Firefox, но отлично работает в IE8. Предложения о том, что я могу сделать, чтобы исправить это? Вот мой код:Hover Drop Down With Overflow

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

<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 в моем заголовке в правильных тегов стиля, divs находятся в теле, а скрипт - до тега body body.

+0

Я не хотел импортировать всю библиотеку для одного эффекта зависания. Небольшие вещи, подобные этому, я нахожу JS более легким. IMO –

+0

Достаточно справедливо, если это только одно событие. – VictorKilo

ответ

2

Если вы не возражаете, что меню падает вниз при наведении на розовый контейнер, а не только ссылку, вы можете использовать этот 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; 
} 

Нет JavaScript необходим. Он чище и работает лучше. Взгляните на мой пример на jsFiddle.

+0

Спасибо, я, наверное, должен был указать в моем вопросе. Действительно, это происходит в боковой панели с каждым контейнером, являющимся классом. : S sorry –

+0

Но что мешает вам иметь правило ': hover' для каждого контейнера? – MMM

+0

, если я положил '.container: hover' и имел 3 класса контейнеров, то независимо от того, какой контейнер они навевают, меню появится правильно? И я не могу сделать его первым ребенком, потому что другие вещи должны идти на него сверху. 'nth' child не поддерживается в каждом браузере, но либо печально :( –