Question

我有一个jquery下拉菜单，可以在所有浏览器中正常工作，但在IE7中，下拉菜单显示在父链接的右侧。我无法弄清楚这一点。我错过了什么？

#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

根据我对CSS的经验，您的父列表（UL的第一级）将文本作为中心对齐。

在IE中，它将此视为对齐所有子元素，因此链接的子UL是居中对齐的。

我通过左对齐我的父UL并给它一些额外的左边填充来修复它。它适用于我的设计，但可以看出这是有问题的。

使用jquery下拉列表的IE问题 - 非常奇怪的CSS问题！需要帮忙

1 个答案: