Question

I have write following code to make a navigation bar following demo.

<ul id="nav">
<li><a href="#">home</a></li>
 <li><a href="#">home</a></li>
 <li><a href="#">home</a></li>
 <li><a href="#">home</a></li>

</ul>
#nav li
{
float:left;
margin-right:13px;
margin-top:25px;
border-left:1px dashed gray;
}
#nav a
{
display:block;
margin:20px 10px;
}
#nav a:hover
{
color:red;
}

On hovering complete red color on block is not showing up I want some thing like this

But red color is just showing on link not on complete block. Help me out in my code.

Answer 1

#nav a:hover
{
color:red;
}

The color property is for specifying the text color. The reason that only the text color is changing is because this is all you’ve asked for. If you want the background color to change, you need to specify background-color:

#nav a:hover
{
  background-color:red;
}