How to create Css menu

So this is gona be some kind of tip how am i doing nice looking css menu.

First of all, here is some example:


Now have a closer look on code.
I am using <menu> element instead <ul>. I can do that because i’ve defined Transitional Doctype. If you are using Strict, you have to use <ul> just cause Strict Doctype doesn’t know element menu.
I am makeing menu not list, so its nice to use this element and its more comprendiouer in css.

Css code

* { margin:0; padding:0; list-style:none; }
menu, li { float:left; }
a { display:block; width:248px; height:77px; text-indent:-99em; overflow:hidden; background:url('menu1.jpg') 0 0 no-repeat; }
a:hover { background-position:0 100%; }

The first line bring us clear field, it means it sets same values for all browsers. Each browser has their own predeclared css for some elements and it do mess during styling.
The second line is just telling, that menu items ll be in one line, not under each other.
The third line declare css for anchor element. It sets its size by width and height what can be done when element is displaying as block.

And here comes 1st tricky part. By setting text-indent to minus value (em is much better than px cause em depends on font size) we sent text out of visible range. But its also important not to forget about overflow:hidden;

2nd tricky part is about image in background. The image contains normal and hover efect. When we want to make hover effect, we just slide background image up. So it means there is no flash effect (while loading hover image to browser).

Hope this help to someone.

2 thoughts on “How to create Css menu

Leave a Reply