Negative margin Issues only with IE - html

Question

I'm having a issue with the navigation bar drop down positioning in IE.
As you can see, the Adhesive Tapes drop down is positioned fine on hover but when hovering over 'Adhesives' and Sealants it is slightly out of position.
I've checked it in Firefox and it's the same but only out by a few pixels.
I've spent some time this morning trying to solve it but only have limited knowledge.
Any help would be great.
www.stickyproducts.co.uk
HTML:http://pastebin.com/z7tu6wCX
CSS:http://pastebin.com/XjnXqEN8
Thanks in advance for any help

Answer 1

Personally I wouldn't set the position of the drop down menu to -999. I would position it in the exact spot it needs to be and then set the visibility: property to hidden;
something like this
.dropdown_4columns_sealants {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* I would set this to position where it should be all the time */
text-align:left;
padding:10px 5px 0px 5px;
border:1px solid #777777;
border-top:none;
z-index: 999;
visibility: hidden; /* I would set this to hide the menu right where it is at */
}
then in my JavaScript I would change the visibility property to visible when you hover over the links rather than reposition it from the original -999em.

Answer 2

I don't think you have a problem with the dropdown, unless there is something else I'm not seeing. But I did see you are forcing a margin -9px to left. I corrected that. Here is the code corrections and the before and after pictures
#menu, .nav-cush {
margin: 0px;
}
.overhang-right {
float: right;
position: relative;
right: 0px;
}
You can actually replace those margin corrections in the css that is already made for them instead of copying and pasting that exact code I gave you. That way you don't have to use !important to overrride anything.
Since you are displaying several behaviors in different browsers. I've edited the lines below with browser hacks. I tested in all browsers and they work. Please do some testing yourself and let me know if it needs work or mark it as an answer so that others can benefit from it.
Find and replace the following:
.dropdown_4columns_adhesives {
width: 988px;
float: left;
margin: 11px 0 0 -204px; /* Chrome & Safari */
margin: 11px 0 0 -198px \0/IE9; /* IE9+ & Opera*/
}
#-moz-document url-prefix(){
.dropdown_4columns_adhesives {margin: 11px 0 0 -203px;} /* Firefox */
}
.dropdown_4columns_sealants {
width: 988px;
margin: 11px 0 0 -349px; /* Chrome & Safari */
margin: 11px 0 0 -339px \0/IE9; /* IE9+ & Opera*/
}
#-moz-document url-prefix(){
.dropdown_4columns_sealants {margin: 11px 0 0 -348px;}/* Firefox */
}
This shows your menu bar pushed to the left
This shows your menu bar and ad image corrected

Answer 3

A better way to handle what you're doing would be to absolute position the dropdown within the main ul#menu (set to relative). Also, take position:relative OFF of the #menu li
this way you could set the dropdown div to position:absolute; top:100%; left:0; right:0; .
The way you have it right now (handling with negative margin) is dependent on the browsers' font rendering. As you can tell this is not consistent between browsers.
Doing it this way you wouldn't have to specify anything for the individual submenus. top:100%; left:0; right:0; would be able to be used for all 3.
An alternative option would be to set specific widths on all of your top level menu links.