CSS下拉列表可见性问题

我正在制作一个简单的下拉菜单，我正在使用JavaScript显示和隐藏它。菜单显示，链接仍然有效，但当我将鼠标悬停在第一个要下拉的链接旁边时，整个下拉菜单将消失，即使我为其设置了特定的高度。我还有一个单独的div，它下面有内容，这个div中的文本会被推到一边，尽管我认为z-index可以解决这个问题

HTML

JavaScript

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

---

链接到：www.stacydavisdesign.com/index_menu.html

请改用

onmouseleave

事件，因为

onmouseout

即使您将鼠标悬停在元素的子元素上，也会将鼠标视为“外出”。示例代码：

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

---

希望这有帮助。

它仍然在做同样的事情，但也没有显示出来，除非我现在走到父母李的下面。不过我不知道，所以谢谢你。@hurrendor你能给我们看一下你正在使用的Javascript吗？我继续并发布了它以及完整的页面链接。@hurrendor我试过使用

mouseleave

，它对我有效。您确定要删除

onMouseOut

部分吗？如果是这样的话，您能告诉我您使用jQuery尝试了

mouseleave

，但失败的页面版本吗？我错误地替换了错误的项目。它确实有效（谢谢），但是下面div中的文本仍然被推到了一边。有什么想法吗？

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

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