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

Question

对此可能有一个非常简单的答案，而且我很可能只是在我的html / css中的一个级别，我仍然无法弄明白，但更有知识的人会更善于给我一个一般的想法如何在主导航项目上鼠标悬停上出现的子窗口菜单的悬停效果如何在ff网站中工作？

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

我查看了该网站的css文件，但我找不到：hover声明。

谢谢！

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

Answer 1

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

Answer 2

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

.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属性，因为它们通常用于这些类型的菜单结构中。如果要在菜单中添加第三级，则需要重复此模式，以进行必要的类名调整。