CSS3过渡和边界

Question

我正在尝试对此网页上的菜单进行逆向工程(这只是一个个人项目,而不是试图窃取他们的工作).

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

但是,我似乎无法使过渡效果起作用.当我添加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 */
}