在主导航列表项上悬停时显示子导航菜单答案

【问题标题】：Making a subnav menu appear on hover on main nav list items在主导航列表项上悬停时显示子导航菜单
【发布时间】：2013-09-14 18:37:38
【问题描述】：

对此可能有一个非常简单的答案，而且我很可能只是在我的 html/css 中我仍然无法弄清楚的水平，但是有更多知识渊博的人可以给我一个一般的想法是如何使鼠标悬停在主要导航项目上的子导航菜单的悬停效果在 ff 网站中起作用？

http://www.bearena.com.au/

我查看了该站点的 css 文件，但找不到它的 :hover 声明。

谢谢！

编辑：我在 Chrome 中使用 Inspect 元素进一步分析了这一点，我注意到悬停时向列表项添加了一个新的类名，我猜这就是子菜单的显示方式。我如何复制这种方法？是在 CSS 中还是涉及到 javascript？

【问题讨论】：

标签： html css hover

【解决方案1】：

您可以将子级别设置为默认显示：无；然后在悬停时将其更改为显示：块；使用这样的结构：

.main-nav ul.main-2-nav{
   display:none;
   height:YourMenuHeight;
   width:YourMenuWidth;
   position:relative;
   top:TopVariance;
   left:LeftVariance
}
.main-nav:hover > ul.main-2-nav{
    display:block;
}

我放入了 position、top 和 left 属性，因为它们通常用于这些类型的菜单结构中。如果您想在菜单中添加第三级，您将重复此模式，进行必要的类名调整。

【讨论】：

谢谢，我已经看到它是这样做的，但是你知道它是如何在那个特定站点中完成的吗？我在网站的 CSS 中找不到与您的示例相似的任何内容，所以我认为可能还有其他方式......或者我没有在正确的 CSS 文件中查找？
该特定站点中使用的方法是通过 CSS 和 jQuery 的组合来控制的。我向您展示的方法是纯 CSS
谢谢，我就是这么想的，你刚刚为我确认了。我对 jQuery 不太熟悉，所以我可能只需要以 CSS 方式进行导航，就像在你的示例中一样。

【解决方案2】：

试试.menu li:hover ul { display: block; }

【讨论】：

谢谢，我很想知道它是如何在那个特定站点中完成的——并不是真的在寻找另一种方法来完成它，只是试图分解那个特定的悬停效果是如何产生的特别是网站，因为我似乎无法在 CSS 文件中找到确切的 ":hover" 声明，所以我想也许它的做法不同。
要获得那里的幻灯片需要一些 javascript。但在大多数情况下，我们添加的悬停部分就是您显示子菜单所需的全部内容。
谢谢！是的，而且我对 javascript 不太熟悉，所以我想我会满足于 CSS 方式。