1

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

更新的 JSFiddle：http: //jsfiddle.net/trevoray/CrPdK/7/

我的导航遇到了两个无法解决的问题。任何人都可以看看并帮助我吗？

  1. 水平位置。页面居中，所以我不知道确切的位置。我把它设为绝对，并认为它会基于它的父元素是绝对的，但它不起作用。无论用户的浏览器有多宽，我都需要水平位置始终相同。

  2. onmouseout 后菜单不会“隐藏”。似乎无法弄清楚如何让菜单始终如一地消失。

这是jsFiddle：

http://jsfiddle.net/trevoray/CrPdK/2/

 #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;}

在此处输入图像描述

4

2 回答 2

0

更新了你的小提琴：

演示：http: //jsfiddle.net/CrPdK/3/

查看mouseenterandmouseleave函数，#Meetings并#nav-meetings为所有其他函数复制它。

不明白你的第一个要求。

于 2013-04-01T13:26:29.107 回答
0
  1. 相对于其父元素绝对定位元素。父元素需要position: relative
<div class="parent">
  <div class="absolute">
  </div>
</div>

.parent { position: relative; }
.absolute { position: absolute; top: 10px; right; 20px }

2. 您已将onmouseout处理程序放到子菜单中。所以如果你用鼠标离开菜单点，什么都不会发生，如果你离开子菜单，子菜单会隐藏。

更新

我现在创建了一个工作示例：http: //jsfiddle.net/VZ7qD/1

注意事项：

  1. 您实际上不需要 JavaScript。请参阅注释掉的最后一个 CSS 语句。这已经足够了，但是使用 CSS 显示时没有动画。（我个人觉得slideDown/slideUp比showbtw 的默认动画更好。）
  2. JavaScript 将mouseenter/处理程序绑定到包含子菜单mouseleave的顶部导航元素。li子菜单是此项的子菜单li。
  3. 我通过为所有元素应用一个灰色渐变来应用您的背景颜色和渐变，然后只向链接元素添加所需颜色的边框，而不是添加实际上是一种纯色的渐变区域。
  4. 使用您的 ID 为所有子菜单中的链接定义自定义背景颜色（类似于顶部菜单项上的粗底边框）
于 2013-04-01T13:29:21.510 回答