The menu above uses a similar concept to the CSS centred content technique: when an element is defined as position: relative, it stays in the document flow, but becomes a new reference point for absolutely positioned child elements. In this case each trigger <li> is position: relative. within the <li> is another list (absolutely positioned) that contains the pull-down menu links.
This means the child (pull-down) list is always positioned relative to it’s trigger, so no matter what the browser text size the pull-down is always in the right position. This also enables flexible width navigation, as the wrapping of text will not affect the position of the pull-down.
For more information view source or save this page.