I'm having trouble getting the CSS for 'a' and 'a:hover' to work properly. The background of the li elements isn't changing to blue when I hover over them. Can anyone provide some assistance? Your help would be greatly appreciated.
Here is the HTML:
<body>
<div id="navbar">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">nature</a></li>
<li><a href="#">travel</a></li>
<li><a href="#">people</a></li>
<li><a href="#">random</a></li>
<li><a href="#">bio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</body>
The corresponding CSS is:
#navbar ul{
float:left;
margin:0;
width:600px;
list-style : none;
padding-top:30px;
}
#navbar ul li
{
vertical-align: middle;
display: inline;
margin: 0;
text-align:center;
font-family: Calibri;
padding-left:15px;
font-size:20px;
font-weight:normal;
list-style-type: none;
color:#808080;
}
#navbar ul li a
{
text-decoration: none;
white-space: nowrap;
line-height: 45px;
padding: 5px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #666;
}
#navbar ul li a : hover
{
color:#FFFF00;
background-color: #4caef2;
}