Menu list compatible with IE6/IE7
I have to modify a HTML page because the menu doesn't work with IE6/IE7/IE8.
HTML code :
<div id="menu">
<table>
<tr>
<td><a href="menu1.php">Menu 1</a></td>
<td>Menu 2
<ul>
<li><a href="submenu1-1.php">Sub-menu 1</a></li>
<li><a href="submenu1-2.php">Sub-menu 2</a></li>
<li><a href="submenu1-3.php">Sub-menu 3</a></li>
</ul>
</td>
<td><a href="menu3.php">Menu 3</a></td>
<td>Menu 4
<ul>
<li><a href="submenu3-1.php">Sub-menu 1</a></li>
<li><a href="submenu3-2.php">Sub-menu 2</a></li>
<li><a href="submenu3-3.php">Sub-menu 3</a></li>
</ul>
</td>
<td><a href="menu5.php">Menu 5</a></td>
<td>Menu 6
<ul>
<li><a href="submenu5-1.php">Sub-menu 1</a></li>
<li><a href="submenu5-2.php">Sub-menu 2</a></li>
<li><a hr开发者_开发知识库ef="submenu5-3.php">Sub-menu 3</a></li>
</ul>
</td>
<td><a href="disconnect.php">Menu 7</a></td>
</tr>
</table>
</div>
CSS code :
#menu a, #menu li, #menu td{
color: black;
text-decoration: none;
}
#menu a:hover{
color: black;
}
#menu ul {
list-style-type: square;
text-align:left;
}
#menu table{
width: 100%;
height:40px;
}
#menu td{
border-right: 2px solid black;
padding-right:5px;
}
#menu td ul{
position:absolute;
left: -999em;
margin-top:0px;
border: 2px outset black;
background: white;
}
#menu td:hover ul{
left: auto;
}
The syntax with the 'td' and 'ul' seems a bit strange to me. Is there any tips to bring back the compatibility with the old versions of Microsoft browsers ?
Thank you !
#menu td:hover ul will work in IE7+ if your page is in Standards Mode.
To make your page use Standards Mode, add a proper doctype as the very first line, such as:
<!DOCTYPE html>
Unfortunately, this won't fix IE6 because that version only supports :hover on a elements.
To fix IE6 (and the other versions of IE if you can't add a doctype and your page must remain in Quirks Mode), you should use this JavaScript fix:
http://peterned.home.xs4all.nl/csshover.html
Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows using only CSS. IE however, has an erratic support for :hover at best, depending on the particular version your visitor is using.
Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.
加载中,请稍侯......
精彩评论