Menu
I am trying to create a simple horizontal CSS crossbrowser drop menu. In theory, the code should work [I][B]in IE6 as well
[code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>
<style type=”text/css”>
html body{
margin:0;
padding:0;
}
.menu {
width:300px;
margin:20px auto 0 auto;
}
.menu ul{
margin:0;
padding:0;
list-style-type:none;
}
.menu ul a{
display:block;
background:#ccc;
width:150px;
height:20px;
}
.menu li{
float:left;
width:150px;
position:relative;
}
.menu ul ul{
position:absolute;
visibility:hidden;
}
.menu ul li:hover ul, .menu ul a:hover ul{
visibility:visible;
}
/* IE6 hacks */
.menu table{
position:absolute;
border-collapse:collapse;
top:0;
left:0;
margin:0;
}
* html .menu ul ul {
top:20px;
}
</style>
</head>
<body>
<div class=”menu”>
<ul>
<li>
<a href=”#”>link 1<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#”>sublink 1.1</a></li>
<li><a href=”#”>sublink 1.2</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li>
<a href=”#”>link 2<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#”>sublink 2.1</a></li>
<li><a href=”#”>sublink 2.2</a></li>
<li><a href=”#”>sublink 2.3</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
</ul>
</div>
</body>
</html>
Any ideas or other approaches?