NavBar

Hello eveyone. I have a quick question hopefully someone can give me some advice. I have attached a photo of the nav bar I would like to implement on my website. I would like for it to work as by the background box hovering over which ever link my curser hovers over with the text changing to white. As in thew picture. What code would I want to use for this effect?

 

For your HTML, you should structure your navigation something like this:

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Code (markup):

Then, the effect you want to create can be done with CSS:

#nav ul{
margin: 0;
padding:0;
list-style-type:none;
}
#nav li{
display:inline;
}
#nav li a{
display:block;
padding:5px 10px;
text-align:center;
float:left;
color:#777;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#nav li a:hover{
color:#fff;
background:#777;
}

Code (markup):

What I did here was take the unordered list and remove the margin or padding that makes it indent as well as the disks that would normally show up.
Then, We made the list items display on the same line.
Then we have to make the "a" elements display as block-level rather than inline so we can give them a width and height.
On the hover pseudo-element, we make the background dark and the color of the text white.

 

Thank you very much! You are very helpful.