Drop-down Menu

This page demonstrates the implementation of a drop-down menu with two nested sub-levels. I tested it with IE8+, and the latest versions of Chrome, Firefox, Safari and Opera on Windows. Some of the fancier CSS (border-radius) doesn't appear in IE8 (added gradients for IE8 11/18/13).

When hovering over a top level menu item, the first sub-menu opens beneath it.

When hovering over a sub-menu item, it's sub-menu will open to the right.

When the page width is such that the last drop-down will open to the right off the viewport, it will open to the left (except for IE8, this was implemented with a media query and I didn't polyfill it for IE8).