css - 嵌套的 ul 在 IE 中不起作用

Question

我的嵌套 ul 在 firefox、chrome 和 safari 中呈现良好，但在 IE 中却不行。它在“答案”链接后立即停止显示内联。所有链接也都变成蓝色并垂直堆叠。

<ul id="headernav">
    <li><a href="donate.php">Donate</a></li>
    <li><a href="answers.php">Answers</a>
    <ul>
        <li><a href="initiatives.php">Initiatives</a></li>
    </li>
    </ul>
    <li><a style="width:8.5em;" href="news.php"><span class="current">News & Events</span> </a></li>
    <li><a href="about.php">About Us</a>
    <ul class="linkarrow">
        <li><a href="leadership.php">Leadership</a></li>
    </ul>
    </li>
    <li><a href="contact.php">Contact</a></li>
</ul>

#headernav {
    width: 555px;
    padding: 0px;
    text-align:center;
    list-style-type:none;
    margin-left:auto;
    margin-right:auto;
}

#headernav li {
    float:left;
    position:relative;

}

#headernav li a {
    display: block;
    text-decoration: none;
    width:6em;
    height:35px;
    color:#2e2d2d;
    padding:0.2em 0.6em;
    padding-top:20px;
    margin-left:3px;
    font-size:14px;
    letter-spacing:1px;
    font-weight:400;

}

/*drop down styles*/

#headernav li ul {
    display:none;
}

#headernav li ul {
    text-align:center;
    position:absolute;
    top:50px;
    left:0;
    width:6em;
    font-size:14px;
    letter-spacing:1px;
    font-weight:500;
    height:30px;
    padding-left:10px;



}

#headernav ul li a {
    display:block;
    background:transparent;
    padding:0.3em 0.6em;
    width:6em;
}

提前感谢您的帮助。

Answer 1

问题是您的第一个嵌套 ul。您正在关闭“ul”之前包含的“li”。

这个

<ul id="headernav">
    <li><a href="donate.php">Donate</a></li>
    <li><a href="answers.php">Answers</a>
    <ul>
        <li><a href="initiatives.php">Initiatives</a></li>
    </li>
    </ul>
    <li>
    //snap

成为

<ul id="headernav">
    <li><a href="donate.php">Donate</a></li>
    <li><a href="answers.php">Answers</a>
    <ul>
        <li><a href="initiatives.php">Initiatives</a></li>
    </ul>
    </li>
    <li>