Question

Frustrated beyond all words, I am having trouble getting the drop downs in IE7 to line up under the parent item. They work in every other browser ~ including IE8 ~ but IE7…

The drop down part of the menu displays off to the right of the parent item in ie7.

can anyone help?

Here is the css:

/* ----------------------------------- navigation ----------------------------------------- */
/* -----------------------------------    main    ----------------------------------------- */

#mainnav ul, #mainnav ul li, #mainnav ul li a {display:block;float:left;list-style:none;width:100%;margin:0;padding:0;}


#mainnav ul li {
    width:auto;
}

#mainnav ul li a {
    width:auto;
    color:#000;
    text-decoration:none;
    font: 400 14pt/52px 'Crimson Text', serif;
    text-transform: uppercase;
    overflow:hidden;
    display:block;
    float:left;
}

#mainnav ul li a span {
    display:inline;
    float:left;
    cursor:pointer;
    overflow:hidden;
    padding:0px 18px 0px 0px;
    margin: 0px 0px 0px 18px;
}

#mainnav ul li:hover, #mainnav ul li a:hover, #mainnav ul li.active a {
    color:#fff;
    background:transparent url(/assets/images/layout/nav-button-sprite.png) no-repeat top left;
}

#mainnav ul li:hover a span, #mainnav ul li a:hover span, #mainnav ul li.active a span {
    background:transparent url(/assets/images/layout/nav-button-sprite.png) no-repeat right top;
    color:#fff;
}

/* ----------------------------------- navigation ----------------------------------------- */
/* ----------------------------------- drop downs ----------------------------------------- */

#mainnav ul li ul { /* second-level lists */
    position: absolute;
    background: url(/assets/images/layout/drop-down-seventy-percent.png) repeat;
    width: 208px;
    top:52px;
    float:left;
    left: -9999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}


#mainnav ul li ul li a, 
#mainnav ul li ul li a span, 
#mainnav ul li ul li a:hover, 
#mainnav ul li ul li a:hover span {
    padding:0;
    margin:0;
    background-image:none;
    color:#fff;
    font: 12px/16px Arial, Helvetica, sans-serif;
    text-transform: capitalize;
}

#mainnav ul li ul li a, 
#mainnav ul li ul li a span  {background-image:none !important;}

#mainnav ul li ul li a span, #mainnav ul li ul li a:hover span {width:200px;padding:4px 0px 4px 8px;}
#mainnav ul li ul li a:hover span {background-color:#88273c;}

#mainnav ul li:hover ul, #mainnav ul li.sfhover ul {
    left: auto;
    }

and here is the html:

<div id="mainnav">
    <ul>
        <li   class="first level-1"><a href="http://ccsind.com/"><span>Home</span></a></li>
        <li   class="level-1"><a href="about-us/"><span>About Us</span></a>
            <ul>
                <li   class="first level-2"><a href="about-us/what-we-do.html"><span>What We Do</span></a></li>
            </ul>
        </li>
    </ul>
</div>

so frustrated….
-sean

Answer 1

Change left: auto to left: 0:

#mainnav ul li:hover ul, #mainnav ul li.sfhover ul {
    left: 0;
}

and add position: relative:

#mainnav ul li {
    width: auto;
    position: relative;
}