Quick CSS menu position fix for IE7


I have been working on this menu for several days. Building the menu was fine, but when it came to testing it in IE7 I was stumped…

Basically what I have is a dropdown menu under the “Selling” menu item. It appears fine in every other browser… In IE7 it positions incorrectly and moves over to the right.

I have spent 3 days searching, fiddling, and trying new things out. Can anyone help me with this?

The code is available via firebug at

Thanks in advance for the help!

Hi, Welcome to SitePoint :slight_smile:

IE6/7 will have problems if you don’t set a left: or right: offset value

When you do that you will need to set the <li> as the containing block for the absolute positioned child (div in your case)

[B].nav li[/B] {
[B].nav .select_sub[/B] {

Your using multiple UL’s though when they only contain one <li>

That could all be condensed to one parent UL with a nested list for the dropdowns. :wink:

Hi dustin_grof! Welcome to SitePoint. :slight_smile:

Could you check that link? It doesn’t seem to work for me.

@Rayzur Thank you so much! I can’t believe how quick a response I got compared to the past couple days I have been trying to figure out the same thing…

@ralph.m I clicked it from the post and it worked for me… It is also working when I manually type it in. Thanks for the reply, Rayzur was able to help already :slight_smile:

Hey Rayzur, I see what you are saying now with the multiple UL’s, could you suggest how I could combine them into one?

Something like this? (when I do this I get problems with by submenu…)

<ul id="menu">
  <li class="menu47"><a href="/index">Home</a></li>
  <li class="menu133"><a href="/luc-trahan">About Luc</a></li>
  <li class="menu106"><a href="/home-listings">Listings</a></li>
  <li class="menu106"><a href="/home-buying">Buyers</a></li>
  <li class="menu106sub"><a href="/selling-your-home">Sellers</a>
    <ul id="select_sub">
      <li><a href="/#">21 Step Marketing Plan</a></li>
      <li><a href="/#">Selling Tips</a></li>
      <li><a href="/#">Home Staging</a></li>
      <li><a href="/#">Selling Values</a></li>
  <li class="menu133"><a href="/our-communities">Barrie &amp; Area</a></li>
  <li class="menu106"><a href="/contact-luc-trahan">Contact Us</a></li>

Also, you may notice in the code for my submenu I have contained it in a DIV. What would be the easiest way to remove the div and have all the same styling apply? Should I just do the above then try figuring out how to get the styling to apply to the #menu ul item?

<div class="select_sub">
	<ul class="sub">
	<li><a href="#">21 Step Marketing Plan</a></li>
    <li><a href="#">Selling Tips</a></li>
    <li><a href="#">Home Staging</a></li>
    <li><a href="#">Selling Values</a></li>

Thanks for your previous help btw!

Something like this?
Yes, it looks like you have got the nested list set up correctly.

Also, you may notice in the code for my submenu I have contained it in a DIV. What would be the easiest way to remove the div and have all the same styling apply?
I just looked back at your page and the only rules you have on that div are the absolute positioning and display none.

You can do away with the display:none; as it is bad for usability anyway. It is better to hide the sublist off-screen with a negative margin. Anyway those rules can just be applied directly to the sub UL.

Have a look at this Simple Dropdown. If you view the page source you will see how li:hover ul sets the left margin back to “0” which reveals the dropdown.

Hi again, much thanks for the advice. This sent me on a long journey of rewriting and moving things around in my css code. I cleaned it up a whole bunch and am much happier now. I learned a lot along the way, but there is one last thing that I can’t figure out. Maybe its because I have spent days looking at this and my eyes don’t know the difference between right and wrong anymore.

Under the Sellers menu item there is a small arrow that points to the dropdown below. This is contained in the rollover for the Sellers menu item. When I move the mouse down to a submenu item, the little arrow disappears.

I tried changing the background image from being on a:hover to li:hover but didn’t see the difference.

Did I miss something simple for this one?


You need this rule.

[B].menu106sub:hover a[/B] {
    background: url(images/menu-106-mos.png) top left no-repeat;

You seemed to have missed the target with your existing rule which was:

.menu106sub [B]li:hover[/B] a {
    background: url(images/menu-106-mos.png) top left no-repeat;

.menusub106 is the list element itself.

Wow thanks! That made my life so much easier and I think I actually understand what I did wrong :smiley: