li活跃并且悬停没有显示相同的结果

Question

我创建了一个导航栏<li class="active">没有显示所需的结果。

显示如下：

我为.active和.hover使用了相同的CSS。我的.hover工作正常但.active不是。

这是Html代码：

<div class="navbar">
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Servies</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

这是CSS：

/*navbar css*/
.navbar{
    width: 920px;
    height: 37px;
    text-align: right;
    text-shadow:3px 2px 3px #321;
    background-color: #666633;
    border-radius: 5px;
}
.navbar ul{
    list-style-type: none;
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}
.navbar li{
    display: inline;
    padding: 20px;
    font-family: 'Play', sans-serif;
    font-size: 18px;
    font-weight: bold;
}
.navbar a{
    text-decoration: none;
    color: #999966;
    padding: 8px 8px 8px 8px;
}

 /*you can see here i add css for hover and active*/
.navbar a:hover, .navbar li.active{
    color: #CCCCB2;
    background-color: #999966;
}

This is its fiddle

我想问为什么即使css相同也有不同的结果？

Answer 1

这是因为您将活动类应用于您的li项目，而不是您的链接项目。我想你会发现，如果你改为写

<li ><a class="active" href="#">Home</a></li>

和你的css

.navbar a:hover, .navbar a.active{
color: #CCCCB2;
background-color: #999966;
}

here is my fiddle

Answer 2

这是因为你有一个padding: 20px;到.navbar li

查看this或this。

Answer 3

由于填充，每个<li>元素都大于<ul>容器。

使用padding: 8px;

尝试

.navbar a:hover, .navbar li.active{
    padding: 8px;
    color: #CCCCB2;
    background-color: #999966;
}

Js Fiddle Demo

Answer 4

你必须改变=＆gt; .navbar li{padding: 8px 20px;}

或

 .navbar a{padding: 8px 24px;}
 .navbar li{padding: 8px 10px;}