0

我正在制作一个css3菜单，但我无法让它完全按照我想要的方式工作。我对此很陌生，所以请耐心等待！:-)

我想要的是：

当您将鼠标悬停在顶级导航上时，我希望下拉菜单缓和并且我希望顶级导航向上滑动 20px 并且我希望顶级导航出现底部边框。这基本上就是它在 FF 中所做的事情。但是，当我这样做时，第二层导航得到了相同的处理。我不想要那个。我希望第二层和第三层导航只有一个基本的悬停在颜色上。我确实希望所有的悬停过渡都是平滑的，所以我也为此使用了一些 css3。

这些都不适用于 IE。另外，我知道我可以使用Modernizrpolyfil 一些js来css transitions在旧浏览器中进行工作，但我不知道该怎么做。有人可以告诉我吗？

这是我的jsfiddle 。感谢你给与我的帮助！

4

2 回答 2

1

这应该可以解决您的问题：

http://jsfiddle.net/NFEt4/

基本上，您需要一些方法来覆盖子菜单的样式。我在嵌套的 ul 上创建了一个新类。

如果您还没有，我建议您查看 SMACSS (http://smacss.com/)，我认为这将有助于在您的 CSS 类中创建更灵活的架构。

至于modernizr 问题，也许您可​​以创建一个单独的问题以确保您得到足够好的答案？

于 2012-08-11T02:32:07.007 回答
1

我改变了这个：

ul#navigation li a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;

}

对此：

ul#navigation .topNav > a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;

}

并将“topNav”类添加到您的顶级导航中。topNav 类之后的子组合器将样式限制为仅第一个锚点。小提琴在这里：http: //jsfiddle.net/zwVwh/

于 2012-08-11T02:37:36.880 回答