嵌套的ul在IE中不起作用

时间:2013-02-10 01:20:29

标签: css internet-explorer list nested html-lists

我的嵌套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;
}

Screenshot of issue

感谢您提前提供任何帮助。

1 个答案:

答案 0 :(得分:2)

问题是你的第一个嵌套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>