JavaScript：Nav Bar下拉列表项

Question

有人可以深入了解我如何复制this示例中显示的功能。

具体地，导航栏（第一标签）＆gt;手表。用户可以将鼠标悬停在链接上，并显示全屏宽度下拉列表，并在用户单击链接或鼠标移除后隐藏。我正在创建一个类似的菜单类型下拉列表，需要它在所有平台和浏览器中运行，包括ie7。

欣赏洞察力。

Answer 1

没有什么特别的花哨，或者需要现代浏览器，只需使用典型的:hover psuedo-class来显示最初隐藏的菜单。

有一个包装器#navigation设置position: relative（这允许孩子相对于它绝对定位）。然后在那里有一个<nav>标签用于居中。然后在其中包含一个ul.level-1 li，display: inline是主菜单项。然后在那些你喜欢的菜单中，这些菜单绝对位于一点并且宽度为100％。

然后显示菜单的位：

// level two menu hidden by default
div.level-2 {
  display: none;
}

// show level-2 when hovering parent menu item
ul.level-1 li:hover div.level-2 {
  display: block;
}