Why you'll should create CSS menus?
It is recomended for many reasons:
- does not require any images and loads faster and sometimes images may have problems loading;
- it's easy to built and use;
- use less memory;
- it's easy to modified when need it;
- better indexing for search engines;

home

contact

about

terms

faq

If we think a little maybe we can find many more other reasons.

This for the beginning requires the html code being created before of all.
Be aware for specifying the doctype of your page unless you don't want to experience problems. This is important for any CSS styles.

You can create the buttons using a div container, in our case a table (easier to use).

We create a cell for every button followed by other cell for spacing as follow:



Now we need to apply the style for having that effect. Here is the required code:
We need two classes for normal and over effect.



You can set or not the font styles but is recomended to add them anyway just in case you may modify your base style and your menu may suffer some modifications at that time.
Don't set any width or height to buttons cells, it will adjust automatically because of padding that we set, unless you want to have a fixed size.

The background color sets different colors for both states (normal and over).
The solid border will appear around the cell transforming it into a button.

For avoiding confusion and make users to understand for sure that there we have a button, on over state will set as pointer his cursor.

home

contact

about

terms

faq

That's all. Have fun.