You can examine the structure of their navigation by viewing their source.
They have an unordered list consisting of list items that have both an anchor, and a nested list in each.
Here's a rough example of what they have:
Code:
<ul>
<li>
<a>Foo</a>
<ul>
<li>Nested Item</li>
</ul>
</li>
<!-- more list items -->
</ul>
Now you could choose to show the nested details via a JavaScript handler, or via CSS. You'll have broader, more reliable support using JavaScript, but CSS will get you taken care of in all modern browsers.
Using CSS, you could show the nested element when the parent is hovered:
Code:
li:hover > ul {
display: block;
}
The JavaScript route would be to attach handlers to each of the list-items in the parent UL. You'd have to handle both the mouseover and mouseleave events. This would be slightly verbose with raw JavaScript, but could be reduced with jQuery:
Code:
$("ul").on("mouseenter mouseleave", "li", function( e ){
$("ul", this).toggle( e.which === "mouseenter" );
});
When a list item is entered with the mouse, any nested UL element(s) will be shown. When the li loses the mouse, they will be hidden.
Before you post, read our: 
