I am retrofitting rollout menus into an existing site and it is looking fine everywhere but IE. Here's a hidden page with the new menuing: http://preemiestoday.com/pages/about_board.php
The menu code looks like this:
<ul>
<li id='link0'><a href='/index.php'>Home</a></li>
<li id='link1'><a href='/pages/about_new.php' onmo开发者_C百科useover='showabout()' onmouseout='hideabout()'>About Us
<div id="aboutRollout" style="display:none" onmouseover="showabout()" onmouseout="hideabout()">
<ul>
<li><a href="pages/about_new.php">Mission</a></li>
<li><a href="/pages/about_board.php">Board Members</a></li>
<li><a href="/pages/about_donate.php">Donate</a></li>
<li><a href="/pages/about_partners.php">Partners</a></li>
</ul></div></a></li>
<li id='link2'><a href='/pages/members.php'>Join Us</a></li>
And so on. The CSS for the about rollout looks like this:
#aboutRollout {
position:absolute;
left:inherit;
top:193px;
width:120px;
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;
}
#aboutRollout LI A {
background-color:#CAD5EC;
color:#000;
text-decoration:none;
}
#aboutRollout LI A:HOVER {
background-color:#CAD5EC;
color:#000;
text-decoration:underline;
}
The issue is that IE interprets the left:inherit; on #aboutRollout as being about the end of the link text as opposed to the beginning.
Any advice on getting it to line up under the LI in IE?
Simply adding this DOCTYPE as your first line to bring it out of "Quirks mode" in IE lines up the menu in IE7/8, Firefox, Chrome:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I didn't notice it screwing up anything else (major) on your page.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论