Not to bad but, there is a mess going on there in the middle. As with the drop-down our first order of business is to add a style rule to initially hide our second level menu items.
Wow! Ok this is not what we are after. Now we can go ahead and tweak the left positioning and the top position but, we would have to do this for each and every fly-out menu and provides no re-usability, definitely not what we want so, back to the drawing board. The problem is that currently the top and left position of the sub menu is being calculated based on the browser window's top corner and distance from the left edge of the browser. To fix this we need to change our container to contain the rule position:relative, this allows us to absolutely position our fly-out based on the top and left as well as right and bottom of our containing element and not the browser window.
Without changing anything the same should be true for the 'Portfolio' fly-out. Great! so this works well but, we need to add some style to clearly seperate our flyout from the first level menu items. Here I simply added a right border that is darker then the :link and :hover states.