Question

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

Here is a jsFiddle of the navigation area and CSS

Here are a couple of screenshots of what it looks like

实现这一目标的最佳方法是什么？我不是最有经验的人，但我对HTML和CSS有很好的把握。任何正确方向的帮助都会很棒。感谢。

Answer 1

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

您要使用的属性是：

selector{
  display: none;
}

selector:hover{
  display: block;
}

希望它有所帮助。

艾默里克。

Answer 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

Answer 3

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

here is demo what u looking for

complete tutorial link

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

3 个答案: