After viewing this example in Internet Explorer 7, I got a surprise: the sub-menu was shown to the right of the active item, not to the left. Internet Explorer 8, instead, shows the sub-menu correctly. In this example I use contextual positioning to dynamically show the sub-menu when the mouse hovers the active item. The active item has the declaration position: relative and the sub-menu is absolutely positioned relatively to it. So what was the problem?
The problem lies in the fact that the list items of the main menu have no stated width, but only a certain amount of horizontal padding to separate the links contained within them. Since the left offset is calculated starting from the left edge of the content area, IE 7 has some problems with this solution. In other words, if you apply a width to all the main list items, then everything works fine, because the left property will be automatically computed as auto, thus making the sub-menu appear on the left edge of the active item.
Another solution, more reliable, is to explicitly specify the left offset for the sub-menu:
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
top: -1000em;
left: 0;
}
Using this solution, we're not relying on the default algorithms used by browsers, but we're forcing them to calculate the left offset as we want.