0

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

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

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

谢谢!

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

4

2 回答 2

0

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

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

于 2013-09-10T22:02:00.610 回答
0

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

于 2013-09-10T21:49:01.960 回答