具有过渡和浮出控件的 CSS3 导航

Question

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

我想要什么：

当您将鼠标悬停在顶级导航上时，我希望下拉列表缓和，我希望顶级导航向上滑动 20px，我希望顶级导航显示下边框。这基本上就是它在FF中所做的。但是，当我这样做时，第二层导航会得到相同的待遇。我不想这样。我希望第二层和第三层导航只是在颜色上有一个基本的悬停。我确实希望所有的悬停过渡都是平滑的，所以我也使用了一些 css3。

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

这是我的 jsfiddle .感谢您给我的任何帮助！

Answer 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/

Answer 2

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

http://jsfiddle.net/NFEt4/

基本上，您需要某种方法来覆盖子菜单的样式。我在嵌套的ul上使用一个新类来做到这一点。

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

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