CSS Menu

In this tutorial we will create a simple CSS top menu, which you can easily customize with your site's colors.

See a demo of our CSS Menu.

We'll start with our html code which displays the menu.



This won't render anything special to our user's yet, so we'll surround our menu in a div.



That's it for our html. Now we need to style our menu using CSS.

Insert the following code into your css file.



Now I'll explain how it works. Our first div is called 'nav', which surrounds our menu. The attributes inside it are all pretty self explanitory.

Our next set of CSS tells the browser how to display links inside the nav div. Links are refered to as 'a' in CSS. For the links in our menu we will add a border, some padding, and a background color. We can also style the font.

Our last set of CSS will tell the browser how to display links when the user's mouse hovers over it. We will make the border a bit darker, and change the background and font color.

Our CSS menu is now finished! Now you can easily customize the colors for your site, and change any settings.

For all you lazy people, I'm going to print the complete html and CSS code below.