The unordered lists stacked below are normally 'out of sight' above the top of the page, but I have moved them into the visible area so that you can see what is happening and how these lists are positoned in this menu system.
The lists below are stacked in sub menu order, with sub menu level four being topmost, then level three, level two and finally level one.
The green blocks are the highlights through the menu structure which are brought into view when a sub menu level is made visible.
Copyright ©2009 stu nicholls - cssplay.co.uk
See what is happening 'out of site' above the menu as you hover over each menu link.
The menu works using a know feature of html which is called a 'float drop' where, if the width of a float left element is too wide to fit within the allocated area then it will drop below any element to the left, and if we use relative positioning for the float left element then we can retain its original position in the page flow but move it to a position relative to its parent element.
You can now see why this is such a complex menu system and should be used with care.