If you view this in your browser you'll see it's just a standard bulleted list. Pretty boring, so let's add some style.
In your stylesheet, add the following:
#navcontainer ul { float:left; width:100%; margin:0; padding:0; font-size:11px; font-family:verdana, arial, helvetica, sans-serif; color:#fff; background:#ccc; } #navcontainer ul li { display:inline; }
I'll explain what we've done.
#navcontainer ul sets styles for the ul contained within the div with the id #navcontainer. We've given it a width of 100% to stretch the bar across the whole width of the div.
#navcontainer ul li applies styles to each list item. Setting it to display:inline and floating the ul to the left will make each list item line up in a horizontal row - exactly what we need for a menu bar.
If you view this, you'll see that it's not very attractive. Let's add some more style.
What we need to do now is add styles to the links themselves. In your CSS add the following:
#navcontainer ul li a { float:left; padding:5px 10px; background:#ccc; color:#fff; text-decoration:none; border-right:1px solid #fff; } #navcontainer ul li a:hover { color:#fff; background:#69c; }
We've added padding to each link to make them more like buttons. Adding border-right:1px solid #fff gives each one a thin white line to the right hand side, emphasising that each one is a button.
