带有悬停子类别的菜单栏？答案

【问题标题】：Menu Bar with Hover Sub-Categories?带有悬停子类别的菜单栏？
【发布时间】：2012-04-12 12:18:51
【问题描述】：

我正在尝试创建一个具有 2 级菜单的菜单栏。顶部菜单是主要菜单。然后它下面的第二层有一些子类别项目。现在您需要先单击主菜单并加载该页面以查看该部分的子类别菜单项，因为它们只是硬编码到页面中。我想这样做，以便当您将鼠标悬停在主菜单项上时，它将加载子菜单。

Here is a jsFiddle of the navigation area and CSS

Here are a couple of screenshots of what it looks like

我最好的方法是什么？我不是最有经验的，但我对 HTML 和 CSS 有很好的掌握。在正确方向上的任何帮助都会很棒。谢谢。

【问题讨论】：

标签： html css hover drop-down-menu

【解决方案1】：

我过去制作过这种类型的菜单，我创建了一个代码副本，您可以在这里找到 http://jsfiddle.net/PWFGd/24/

您要使用的属性是：

selector{
  display: none;
}

selector:hover{
  display: block;
}

希望对你有帮助。

艾美式。

【讨论】：

我有点搞定了，但有几个问题。首先是否可以在左侧一直启动子菜单？看图片。 http://i.imgur.com/XUFKb.png 另外，我似乎无法让我的字体像上面的那样改变。在哪里输入字体？我尝试了一堆不同的逻辑点，但似乎没有改变。谢谢！
还有一种方法可以预先选择其中一个菜单项吗？所以当你没有将鼠标悬停在它上面时，默认的会出现吗？
要让它从左边开始，你可以给这个属性添加一个负的左边距 => #menu li ul，当然还有另一种方法，但我很久以前就写了这段代码，我真的不能记住所有细节。关于字体，您必须在此处更改它 => #menu ul li.menu 但我也建议您将 #menu ul li.menu 替换为 #menu ul li.menu, #menu ul li a 这样即使您没有子菜单，您的主菜单也会看起来一样。
我能够更改字体，但我仍然卡在边缘。我尝试添加边距，但它不会再向左移动。不过我可以把它移到右边。问题也在于它移动了所有这些。这是它在 4 个不同标题上的屏幕截图http://i.imgur.com/pvvYa.png 我希望它们都从家的下方开始。这可能吗？
还有一种方法可以预先选择其中一个菜单项吗？所以当你没有将鼠标悬停在它上面时，默认的会出现吗？

【解决方案2】：

您可以在当前结构中使用通用兄弟组合器 (~) 来完成类似的操作。使用hover 伪元素来切换子菜单的显示状态（或可见性）。

http://jsfiddle.net/PWFGd/25/

/* on hover of mainmenu, find subnav and show it */
.mainMenu:hover ~ ul.subNav {
    display: block;
}

ul.subNav{
    display: none; /* hide submenu */
    font:normal 11px/12px Arial, Helvetica, sans-serif;
    padding:4px 0 0 0;
}

网上有很多基于 CSS 的导航菜单示例。我认为您可能想重新考虑您的 html 结构并使用其中之一。 Google

【讨论】：

【解决方案3】：

@Aymeric 的回答很好，它也被称为“CSS 中的 2 级水平导航”，我经常在我的项目中使用它们，

here is demo what u looking for

complete tutorial link

【讨论】：