Question

I have a jquery dropdown menu that works fine in all browsers, but in IE7 the dropdown menu displays to the right of the parent links. I can’t figure this out. What am I missing?

#nav {
width: 898px;
height: 22px;
float: left;
background: #ED2588;
text-align: center;
z-index: 9999;
padding-top: 8px;
}

#nav a {
float: left;
font-size: 75%; *;
font-size: 71%;
font-weight: bold;
height: 15px;
padding: 0px 12px;
    *padding: 0px 12px;
text-transform: uppercase;
line-height: 14px;
border-left: 1px solid #F8A7CF;
text-align: center;
}

#nav .nb {
border-left: 0;
margin-left: 3px; *;
margin-left: 7px;
}

#nav a:hover {
color: #FBC8E1;
}

#jsddm {
margin: 0;
padding: 0;
float: left;
}

#jsddm li {
float: left;
list-style: none;
}

#jsddm li a {
display: block;
text-decoration: none;
white-space: nowrap;
float: left;
}

#jsddm li a:hover {
cursor: pointer;
}

#jsddm li ul {
width: 132px;
margin: 22px 0px 0px 0px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 10000;
background: #ED2588;
}

#jsddm li ul li {
width: 132px;
display: inline;
margin: 0;
padding: 0;
}

#jsddm li ul li a {
width: 132px;
height: 25px;
text-align: left;
font-size: 75%; *;
font-size: 71%;
font-weight: bold;
text-transform: uppercase;
line-height: 25px;
background: #ED2588;
border-left: 0px;
}

#jsddm li ul li a:hover {
background: #7F1616;
}



    <div id="nav">
        <ul id="jsddm">
            <li><a class="nb" href="index.htm">HOME</a></li>
            <li><a  href="invites.htm">INVITATIONS</a>

            <ul><li><a href="baby.htm">Baby</a></li>
                <li><a href="beach.htm">Beach</a></li>
                <li><a href="birthday.htm">Birthday</a></li>
                <li><a href="borders.htm">Borders</a></li>
                <li><a href="bridal.htm">Bridal</a></li>
                <li><a href="children.htm">Children&#39;s</a></li>
                <li><a href="entertaining.htm">Entertaining</a></li>
                <li><a href="moving.htm">Moving</a></li>
                <li><a href="seasonal.htm">Seasonal</a></li>
                <li><a href="sports.htm">Sports</a></li>
                <li><a href="themedparties.htm">Themed Parties</a></li>
                <li><a href="wedding.htm">Wedding</a></li>
            </ul>


            </li>
            <li><a href="stationery.htm">STATIONERY</a>
            <ul>
                <li><a href="boxedgifts.htm">Boxed Gift Sets</a></li>
                <li><a href="greetings.htm">Greetings</a></li>
                <li><a href="notepads.htm">Notepads</a></li>
                <li><a href="thankyous.htm">Thank You Notes</a></li>
            </ul>
            </li>
            <li><a href="specialgifts.htm">SPECIALTY GIFTS</a>
            <ul>
                <li><a href="sp_baby.htm">Baby</a></li>
                <li><a href="sp_beach.htm">Beach</a></li>
                <li><a href="sp_birthday.htm">Birthday</a></li>
                <li><a href="sp_bridal.htm">Bridal</a></li>
                <li><a href="sp_entertain.htm">Entertaining</a></li>
                <li><a href="sp_everyday.htm">Everyday</a></li>
                <li><a href="sp_kids.htm">Kids</a></li>
                <li><a href="sp_seasonal.htm">Seasonal</a></li>
                <li><a href="sp_sports.htm">Sports</a></li>
                <li><a href="sp_themed.htm">Themed Parties</a></li>
            </ul>
            </li>
            <li><a href="onsale.htm">ON SALE</a></li>
            <li><a href="customservices.htm">CUSTOM SERVICES</a>
            <ul>
                <li><a href="cs_baby.htm">Baby</a></li>
                <li><a href="cs_beach.htm">Beach</a></li>
                <li><a href="cs_birthday.htm">Birthday</a></li>
                <li><a href="cs_bridal.htm">Bridal</a></li>
                <li><a href="cs_entertain.htm">Entertaining</a></li>
                <li><a href="cs_everyday.htm">Everyday</a></li>
                <li><a href="cs_kids.htm">Kids</a></li>
                <li><a href="cs_seasonal.htm">Seasonal</a></li>
                <li><a href="cs_sports.htm">Sports</a></li>
                <li><a href="cs_themed.htm">Themed Parties</a></li>
            </ul>
            </li>
            <li><a href="ourstory.htm">OUR STORY</a></li>
            <li><a href="press.htm">PRESS</a></li>
            <li><a href="contactus.htm">CONTACT US</a></li>
        </ul>
    </div>

Answer 1

From my experience with CSS your parent list (the first level of the UL) is aligning the text as center.

in IE it treats this as aligning all child elements so the child UL for the links is center aligning.

I fixed this by left aligning my parent UL and giving it some extra left padding. It worked for my design however can see this is problematic.