IE6/7 don't really understand auto in the same way as other browsers and you need to tell them specifically where you want the dropdown to be. If you say left:auto and the parent element is text-align:center then auto will be at the center of that element (as seen in IE7 and under in your menu). If the parent was text-align:right then auto would be at the right of the element. Only when the parent is text-align:left will your menu appear in the right place.
Obviously this is no good for a solid foundation so instead you need to tell IE7 and under specifically where you want the menu to be placed and this is done by setting position:relative to the parent list of the immediate dropdown and then using left:0 for the dropdown itself instead of auto. This will ensure it is always in the right place.
- I've also been having issues with 'the good old' z-index in IE 6 & 7. The drop down menu was originally hiding behind #topContact, #socialMediaBar and .slider - but have resolved this by using z-index:99999; to the drop down menu and then z-index:-1; to #topContact, #socialMediaBar. The only problem is the links I have within these divs are now not working due to the negative z-index... again would really appreciate if anyone could help me out with this.
Thanks so much!
As Ralph said you simply need to apply a higher z-index to the main parent of that menu (#head) and then it will automatically sit on top of the elements below that are at the same stacking level (#socialMediaBar). You should probably also apply position:relative and a high z-index to your header element to avoid any other issues outside that context.