Question

我正在使用css3菜单，我无法让它按照我想要的方式工作。我对此很陌生，所以请耐心等待我！： - ）

我想要的是什么：

当您将鼠标悬停在顶级导航栏上时，我希望下拉菜单能够轻松完成并且我希望顶级导航栏向上滑动20px并且我希望顶级导航栏显示底部边框。这基本上就是它在FF中的作用。然而，当我这样做时，第二层导航正在得到同样的待遇。我不希望这样。我希望第二和第三层导航只有一个基本的悬停颜色。我确实希望所有的悬停过渡都是平滑的，所以我也使用了一些css3。

这些都不适用于IE。另外，我了解我可以使用Modernizr对某些js进行polyfil以使css transitions在旧浏览器中正常工作，但我不知道该怎么做。有人能告诉我吗？

这是我的jsfiddle。谢谢你能给我的任何帮助！

Answer 1

这可以解决您的问题：

http://jsfiddle.net/NFEt4/

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

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

至于现代化问题，也许您可以创建一个单独的问题，以确保您获得足够好的答案？

Answer 2

我改变了这个：

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/

带过渡和弹出的CSS3导航

2 个答案: