In this article we are going to re-visit a technique we first learned in the Star Matrix Pre-loaded article, except that this time we are going to use it to produce a navigation menu. Before we start it may be worth it to become familiar with the menu we are going to make; you can see a live version here.

At first glance it seems simple enough, but as often is the case there’s more to it than meets the eye. As you roll your mouse over a menu item all the menu items go into the off-state and only the hovered item stays alight. This is quite a subtle difference from the norm where just the item rolled-over changes. Usually this effect can only be done with added JavaScript but today you will learn how to do this with CSS alone.

(more…)