Expert: Andrew Hoffman - 6/26/2009

Question
I created a drop down menu. It works fine in Firefox, but I have a little problem in IE. When you hover over a menu item that has sub menus, IE positions the subs far to the right, as you can see by the corresponding pictures. Here is my css. Have ideas about how to move the subs over to the left under the menu item?

Links to pictures:
Menu in FF (correct)
http://i39.tinypic.com/9jztkx.jpg
Menu in IE (not correct)
http://i41.tinypic.com/25jv1gz.jpg

.moduletablemainnav {
position:absolute;
z-index:100;
margin:0px;
padding:0px;
}

#mainlevelmainnav,#mainlevelmainnav ul {
float:left;
list-style:none;
line-height:1em;
background:transparent;
margin:0;
padding:0;
}

#mainlevelmainnav a {
display:block;
color:#f90;
margin-right:0px;
padding:0.3em;
}

#mainlevelmainnav li {
float:left;
padding:0;
}

#mainlevelmainnav li ul {
position:absolute;
left:-999em;
height:auto;
width:11em;
background:#3A2B0D;
border:#EBDCBD 1px solid;
margin:20px;
}

#mainlevelmainnav li li {
width:11em;
}

#mainlevelmainnav li ul a {
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
}

#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}

#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
l,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
left:auto;
z-index:6000;
}

#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
background:#3A2B0D;
}

Answer
Jeff,

Without seeing the page in action, it's difficult to give you the exact answer.  However, you can create special rules for IE6 or IE7, depending on which one (or both) is giving you fits.

Say you have something positioned like this:

#someDiv {
position: relative;
left: 30px;
top: 100px;
}

Now let's say things look off in IE6.  The div is over too far to the right.  We can override the 'left' property by writing:

* html #someDiv {
left: 20px;
}

Notice other rules for this div still apply and do not need to be overwritten.

In IE7, we can override the same property in the above example by writing:

:first-child + html #someDiv {
left: 20px;
}

Hopefully, you can figure things out from here.

Andrew