NOTE: If you come in from the right side of the menu with your cursor real slow and hover over the last menu item ("Test") IE8 will display the hover values on the very first menu item on the far left ("Home"). You can actually hold the "Home" hover open by resting in the right spot to the right of "Test". There is about a 2px window there which causes this behavior. Within that 2px area you will notice that your cursor does not change to a hand as it does when it activates all other links, yet the first list item is triggered. The cause of this seems to be a nested ul on any list item.

Update: The problem with IE8 had nothing to do with a nested ul on the list items. This test case has led to the discovery of a new whitespace bug in IE8. A complete analysis of the bug(s) can be found at James Hopkins IE8 bugs. There were actually two bugs that were going into play at the same time here.

The First Bug was an:
"Unexpected whitespace node rendered after the last child of an inline-level element".

The Second Bug (triggered by the first bug being present) is a:
"Misplaced hover on the first child while hovering on the unexpected node of the last child".

I have also set up my own Test Case that shows the behaivior of the bug(s) along with some conditions that trigger the hover bug.

The Fix: If you view my Test Case above in IE8 you can see all the chaos that was started by this seemingly harmless little bug. It is really very easy to fix the problem though. For one you could set a negative right margin on the last child and hide the unexpected node. That would require an extra class on the last element with styling from the css. Or you can kill the whitespace in the html by altering the markup. There will be times when this bug will not even cause problems for you, but in the case of a menu using inline elements like in this demo it will need to be confronted.

To fix this page by altering the html just relocate the closing li tag on the last list item like this:

        <li><a href="#">Test</a></li
    ></ul><!-- IE8 fix -->	
</div><!-- end nav -->
    

Happy Coding, Ray H.