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.