Html 使子导航菜单出现在主导航列表项的悬停位置

这可能有一个非常简单的答案，我很可能只是在我的html/css中的一个级别上，我仍然无法理解它，但是有没有更了解情况的人能给我一个大概的想法，在ff网站上，鼠标上出现的subnav菜单的悬停效果是如何在主导航项上的鼠标上工作的

我查看了该站点的css文件，没有找到：hover声明

谢谢

---

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

尝试

.menu li:hover ul{display:block；}

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

---

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

谢谢，我见过这样做的，但是你知道在那个特定的网站上是怎么做的吗？我在网站的CSS中找不到与您的示例类似的任何内容，因此我认为可能有其他方法…或者可能我没有查看正确的CSS文件？该特定网站中使用的方法是通过CSS和jQuery的组合来控制的。我向你们展示的方法是纯CSSThanks，这就是我所想的，你们刚刚为我证实了这一点。我对jQuery不太熟悉，所以我可能不得不用CSS的方式进行导航，就像在你的例子中一样。谢谢，我很想知道它是如何在那个特定的网站上完成的，而不是真的在寻找另一种方式，我只是想具体分析一下这个特定的悬停效果是如何在那个网站上创建的，因为我似乎在CSS文件中找不到它的确切“：hover”声明，所以我想这可能是另一种方式。要获得上面的幻灯片，需要一些javascript。但在大多数情况下，我们添加的悬停块是显示子菜单所需的全部。谢谢！是的，我对javascript不太熟悉，所以我想我会接受CSS的方式。

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