开发者

IE problem with jquery dropdown - Very weird CSS problem!!! Need help

开发者 https://www.devze.com 2023-01-27 09:27 出处:网络
I have a jquery dropdown menu that works fine in allbrowsers, but in IE7 the dropdown menu displays to the right of the parent links.I can\'t figure this out.What am I missing?

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>


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消