jQuery/CSS导航未隐藏和水平位置问题

更新：水平定位已解决，但仍存在菜单未消失的问题

更新的JSFIDLE:

我的导航系统遇到了两个问题，我无法通过。谁能帮我看看吗

水平位置。这一页居中，所以我不知道确切的位置。我将它设置为绝对的，并认为基于它的父元素，它将是绝对的，但它不起作用。我需要水平位置始终保持不变，无论用户的浏览器有多宽

菜单在onmouseout之后不会“隐藏”。似乎不知道如何让菜单持续消失

以下是JSFIDLE：

更新了您的小提琴：

演示：

查看

#会议

和

#导航会议

的

mouseenter

和

mouseleave

功能，并为所有其他会议复制该功能

我不明白你的第一个要求

相对于其父元素定位绝对元素的步骤。父元素需要

位置：相对

.parent{position:relative；}
.absolute{位置：绝对；顶部：10px；右侧；20px}

二,。您已经将

onmouseout

处理程序放到了子菜单上。因此，如果您用鼠标离开菜单点，什么也不会发生，如果您离开子菜单，子菜单将隐藏

更新 我现在创建了一个工作示例：

注意事项：

实际上，您不需要JavaScript。请参阅注释掉的最后一条CSS语句。这就足够了，但是使用CSS时，在显示时没有动画。（我个人认为

slideDown

/

slideUp

比

show

btw的默认动画更好。）

JavaScript将

mouseenter

/

mouseleave

处理程序绑定到包含子菜单的顶部导航

li

元素。子菜单是此

li

项的子菜单

我通过为所有元素应用一个单一的灰色渐变来应用背景色和渐变，然后只向链接元素添加所需颜色的边框，而不是添加实际上是一种普通颜色的渐变区域

使用ID为所有子菜单中的链接定义自定义背景色（类似于顶部菜单项上的胖底边框）

---

没有正确理解你的第一个要求。你能再精确一点吗？@I_Debug_我希望菜单的垂直边缘与导航按钮的垂直边缘对齐。如果浏览器被加宽，它的位置不会改变。tks，但它不工作。菜单仍然没有消失。我用的是Mac Chrome。我用我所说的截图更新了原始帖子。另外，第一个要求意味着我希望每个菜单的水平位置直接与其对应的按钮对齐。目前，当浏览器宽度超过1050px时，水平位置会发生变化。谢谢@ohcibi！！这对水平定位有效。现在我仍然有导航菜单不消失的问题。你是说我不应该用onmouseout？更新代码：哇，太棒了！我认为这个设计不可能使用LI，这是我的首选方法。谢谢您好@ohcibi，我的网站的其他部分出现了一个关于您更新代码的问题。我不得不更新它，这样样式就不会影响我网站上的每个

，但现在列表项的要点显示出来了。你能看看我更新的代码，告诉我我做错了什么吗？通过将

#navMenu

前置到禁用项目符号的样式，您已经为

#navMenu

本身禁用了此样式，因为它现在只应用于其子级。因此，只需在更新的选择器中添加一个

，#navMenu

，或者将所有内容放入包装器
，或者更好的
。哦，我不知道那个功能！现在就做，还有，关于如何使第二行文本缩进的想法吗？代码中的填充似乎可以防止这种情况。

 #nav-about { z-index:4000; position:absolute; left:186px;  display:none;}
 #nav-meetings { z-index:4000; position:absolute; left:357px; display:none;}
 #nav-journal { z-index:4000; position:absolute; left:528px;  display:none;}
 #nav-goodstuff { z-index:4000; position:absolute; left:699px; display:none;}
 #nav-members { z-index:4000; position:absolute; left:819px; display:none;}