After conducting some testing on a design I coded, I found that it functions well in FF 13, Chrome 21, IE 7/8, and Opera 11.62 for Windows, as well as Safari 5.1 for OS X.
Unfortunately, since I only have WinXP, I had to utilize Adobe Browserlab to test for OS X and IE 9.
The issue arises in IE9 and FF 11 for OS X, where the navigation bar seems to drop down as if it's too wide, despite my thorough checks confirming otherwise.
You can view the page at:
Although I made the following changes, there has been no improvement in those problematic browsers:
#header .nav ul {
width: 992px; // Updated
margin: 0px auto; // Changed to center align but still facing same issue
}
#header .nav li ul.sub {
position: absolute;
display: none;
width: auto; // Added to prevent inheriting width from above
/*left: -1px;*/ // Removed
top: 45px;
z-index: 1000;
}