My Test Menu

Text Menu

During the construction of my site I did several test with HTML and CSS to make a simple and good looking menu. I tried to do it without JavaScript: CSS only. After looking around on Internet, watching more source code then real pages, I combined a few things together and the above menu was made.

The mouseover effect is done by changing the background on a:hover
As you can see there are two types of menus:

Menu 2

No Class Menu 3

To simulate a real button press, the text is shifted 1 pixel to the right:

margin : 0px 0px 0px 1px;

and the text menu:

ul.testmenu a:hover {text-decoration : underline;}

Problems:

On several places I've put:
height : 16px;

Without this, Opera 7 shows a lot of space between two menu items.

For Internet Explorer 6 the line-height had to be set:
line-height : 14px;
When you don't do, it may look good, but when someone tries to change the font size, then only the space between the menu items changes; the font size itself remains the same.

With My favorite browser, Firefox it is all OK. Last, but not least, this menu works only in the newer browsers; with Netscape 4.7 you won't see anything.
It is tested with the following browsers: