Positioning nested ul

I have a nested ul (menu) and want to position the nested menu directly beneath the containing menu, starting on the same horizontal position as the outer menu.

See Example

In this example the nested menu is positioned too far to the left and a litt开发者_开发百科le too high (it should start vertically where the containing menu ends).

I might use left: 0px; as showed here to fix the horizontal position, but that still doesn't fix the vertical position.

You can use top:40px; to fix the vertical position

Like here: http://jsfiddle.net/zdkb5/2/

I fixed it with:

margin-top:10px; to the #menu > ul > li > ul class

Demo

The height of the outer container is irrelevant.