li list positioning behavior

http://jsfiddle.net/chap开发者_StackOverflow社区ster11/aUYTt/

I'm trying to figure out why the third level ul tag list in this jsfiddle example it squashed up at the same position as the second level ul The second level li tags are positioned correctly but the third level get messed up any ideas why. Does position absolute crush the default list hierarchy positioning?

Thanks

Because of

#nav ul{
    position:absolute;
}

which counts for all <ul> inside #nav, so even in the third or fifth level.

Re-style the third level separatly:

#nav ul ul {
    position: static;
}

See also: http://reference.sitepoint.com/css/position