html - li active and a hover not showing same result -

i have created navbar <li class="active"> not showing desired result.

it showing this:

i have used same css .active , .hover. .hover working fine .active not.

this html code:

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

and 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 add css hover , active*/ .navbar a:hover, .navbar li.active{     color: #ccccb2;     background-color: #999966; } 

this fiddle

i want ask why have different result there css same?

each <li> element larger <ul> container due padding.

try padding: 8px;

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

js fiddle demo