CSS3 过渡和边框

Question

我正在尝试对该网页上的菜单进行逆向工程(这只是一个个人元素，并非试图窃取他们的成果)。

http://clapat.ro/themes/eleven/color/

但是，我似乎无法使过渡效果发挥作用。当我添加 border-top on 时，它会将 border-top 的内容向下推，而不是像示例中那样保持良好的内联。

此外，边框似乎向上“变暗”，但当我这样做时，它向下变暗。

如有任何帮助，我们将不胜感激!

Answer 1

这是导致问题的原因:

.nav > li > a {
    display: block;
}

来自 bootstrap.css 如果您删除那部分 CSS，它会正常工作。

您可以通过添加 display: inline; 覆盖 index2.php 中的样式:

.navbar a, .navbar a:active, .navbar a:visited {
    color: #7f7f7f;
    padding-top: 35px;
    height: 90px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 45px;
    display: inline;         /* added this line */
}