	AllExperts > DHTML
	Search

About Andrew Hoffman
Expertise
I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.

Experience
Experience in the area
I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.

What I'm doing now
My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com

You are here: Experts > Computing/Technology > HTML/XML > DHTML > Drop down menu needs css correction in IE

DHTML - Drop down menu needs css correction in IE

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

Add to this Answer Ask a Question