Navigation Menu

Roll your mouse over the menu to see the effect!

As the mouse rolls over the menu items all the other menu items switch off. This is usually done with Javascript as it was previously though impossible to do in CSS. However this menu is all CSS and working in most browsers and doesn't need any Javascript at all..

The current menu item is selected by using a body ID on each page to identify the current item. The current item is also stopped from being selected by having an element placed on top which stops the link from activating.

When you roll over the current item the menu turns back to the normal default background.

Most of this is accomplished by changing the anchors background position and size on hover to reveal the current item and hide all other items. A clever z-index manipulation is also used to allow the mouse to move to the next item even though the hovered anchor takes up the whole row.

Read the Article on Search This for more info.