Flashy Navigation with Rollover Effect

Flashy Navigation with Cool Rollover Effect. The Rollover Effect was achieved by first setting a large margin on mouse hover to the navigation item and then after a small delay setting a negative top offset to the same item. I learnt this trick from a similar navigation made by Joe Critchley.

One thing to note is that, the background colors are set on the <li> instead of <a>. This is because during the rollover effect, the <a> pushes down which shows the <li> (which can have a different background color) from behind.

No Support in IE9 and below, but the navigation itself degrades gracefully.