Проблема с видимостью выпадающего списка CSS

Я делаю простое раскрывающееся меню, которое я использую для отображения и скрытия с помощью JavaScript. Меню отображается, и ссылки все еще работают, но когда я наводил указатель мыши на первую ссылку, чтобы выпасть, все раскрывающееся меню исчезает, хотя я установил для него определенную высоту. У меня также есть отдельный div с содержимым под ним, и текст в этом div отталкивается, хотя я думал, что z-index это исправит.

HTML

<div id="nav">
<ul>
<li><a href="#" id="nAbout">About</a></li>
<li><a href="#" id="nPortfolio" onMouseOver="showDrop();">Portfolio</a>
<ul id="dropdown" onMouseOut="hideDrop();">
<li><a href="#">Print Design</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Illustration</a></li>
</ul></li>
<li><a href="#" id="nContact">Contact</a></li>
<li><a href="#" id="nBlog">Blog</a></li>
</ul>
</div>

CSS

#nav{ margin-left:550px;
padding-top: 110px;
font-family: 'Averia Serif Libre', cursive;
font-size: 24px;
position: relative;
}
#nav ul li { display: block;
float: left;
margin-right: 10px;}
#nav ul li a:link, #nav ul li a:visited { text-decoration: none;
float: left; }
#nav ul li a:hover, #nav ul li a:active { color: #00B2EE; }
#nav ul li ul { visibility:hidden;
top:0;
left: 0;
display:block;
width: 100px;
height: 100px;
clear: both;
z-index: 2;
padding-top: 2px; }
#nav ul li ul li {width: 100px;
z-index: inherit;
background-color: #AAA;
font-size: 16px;
line-height: 22px;}

JavaScript

function showDrop() {
document.getElementById("dropdown").style.visibility="visible"; }
function hideDrop() {
document.getElementById("dropdown").style.visibility="hidden"; }

Ссылка на: www.stacydavisdesign.com/index_menu.html


drop-down-menu css overlapping
person hurrendor    schedule 14.08.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вместо этого используйте событие onmouseleave, поскольку onmouseout считает, что мышь «отсутствует», даже если вы наводите курсор на дочерние элементы элемента. Образец кода:

$("#dropdown").mouseleave(function() { //jQuery required; onmouseleave is IE-specific
    hideDrop();
});

Надеюсь, это помогло.

person Chris    schedule 14.08.2012
comment
Он по-прежнему делает то же самое, но также не показывает, пока я не перейду ниже родительского li. Хотя я этого не знал, так что спасибо. - person hurrendor; 15.08.2012
comment
@hurrendor, не могли бы вы показать нам Javascript, который вы используете, пожалуйста? - person Chris; 15.08.2012
comment
Я пошел дальше и разместил это, а также полную ссылку на страницу. - person hurrendor; 15.08.2012
comment
@hurrendor Я пытался использовать mouseleave, и у меня это работает. Вы уверены, что удаляете часть onMouseOut? Если да, не могли бы вы показать мне версию страницы, где вы пробовали mouseleave с помощью jQuery, и это не сработало? - person Chris; 15.08.2012
comment
Я по ошибке заменил не тот элемент. Это работает (спасибо), но текст в div внизу все еще отодвигается в сторону. Любые идеи по этому поводу? - person hurrendor; 15.08.2012
comment
В итоге я изменил родительский li на position: относительный, а затем добавил position: absolute к дочернему ul. Проблема с перемещением контента решена! - person hurrendor; 16.08.2012
comment
@hurrendor О, это хорошо, я только что работал над этим! Кстати, я взглянул на текущую версию index_menu.html, которая у вас есть на stacydavisdesign.com — убедитесь, что вы используете jQuery при выполнении mouseleave, иначе она не будет работать во всех браузерах. Если это сработает, обязательно примите это решение в качестве ответа и/или проголосуйте за него, чтобы вопрос больше не считался без ответа! - person Chris; 16.08.2012