css - IE 9 更新取消了这些下拉菜单

Question

所有其他浏览器都可以在“关于”和“资源”下正常显示这些卷展栏，但 IE 9 不会显示它们。

http://www.preemiestoday.com/pages/about_contact.php

我的 CSS 看起来像这样:

#aboutRollout {
    position:absolute;
    left:inherit;
    top:193px;
    width:200px;
    height:170px; // added today trying to fix this
    z-index:5;
    background-color:#CAD5EC;
    color:#000;
    border:1px solid #fff;
    padding-top:5px;
    z-index:100;
}
#aboutRollout LI {
    border:none;
    padding: 0 5px 5px 5px;
    font-size:11px;
    white-space:nowrap;
    clear:both;
}

#aboutRollout LI A {
    background-color:#CAD5EC;
    color:#000;
    text-decoration:none;
}

#aboutRollout LI A:HOVER {
    background-color:#CAD5EC;
    color:#000;
    text-decoration:underline;
}

HTML 看起来像这样:

<li  id='link1'><a href='/pages/about.php'  onmouseover='showabout()'  onmouseout='hideabout()'>About Us<div id="aboutRollout" style="display:none" onmouseover="showabout()"  onmouseout="hideabout()"> 
<ul> 
<li><a href="pages/about.php">Mission</a></li> 
<li><a href="/pages/about_board.php">Board Members and Staff</a></li> 
<li><a href="/pages/about_donate.php">Donate</a></li> 
<li><a href="/pages/about_partners.php">Partners</a></li> 
<li><a href="/pages/about_contact.php">Contact</a></li> 
</ul></div></a></li>

JS 看起来像这样:

function showabout() {
document.getElementById('aboutRollout').style.display='block';
}
function hideabout() {
document.getElementById('aboutRollout').style.display='none';
}

谁能看出为什么 IE9 会显示一个空框，而且只有在我定义高度时才显示空框？

已在 IE8、IE9、Chrome、FF 和 Windows Safari 中检查。

感谢您的任何建议!

Answer 1

问题在于内联元素( anchor )内的 block 级元素(div)。

所以 DIV 被 LI 取代了:

<li  id='link1' onmouseover='showabout()'  onmouseout='hideabout()'><a href='/pages/about.php'>About Us</a><li id="aboutRollout" style="display:none" onmouseover="showabout()"  onmouseout="hideabout()"> 
<ul> 
<li><a href="/pages/about.php">Mission</a></li> 
<li><a href="/pages/about_board.php">Board Members and Staff</a></li> 
<li><a href="/pages/about_donate.php">Donate</a></li> 
<li><a href="/pages/about_partners.php">Partners</a></li> 
<li><a href="/pages/about_contact.php">Contact</a></li> 
</ul></li>

并且外部 UL 被分配position:relative并且我调整了 rollouts 的位置。