带有过渡和弹出窗口的 CSS3 导航

Question

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

我想要的:

当您将鼠标悬停在顶级导航上时，我希望下拉菜单能够缓和并且我希望顶级导航向上滑动 20 像素并且我希望顶级导航显示底部边框。这基本上就是它在 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 类之后的子组合器将样式限制为仅第一个 anchor 。 fiddle 在这里:http://jsfiddle.net/zwVwh/