我的嵌套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;
}
感谢您提前提供任何帮助。
答案 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>