> Victor Subervi wrote:
> Hi:
> Has anyone come up with a css drop-down menu that works in both IE7 *and*
> IE6? Is it even possible? I see Chris Case tried as much, and no one seems
> to have responded to his post...
The one below works in IE6, IE7, Firefox, Opera and Safari and can be adapted,
added or subtracted to, according to needs.
---------------------------------------------------------------------------------------------------------
CSS:
body, html {
padding:0;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#menu {
background-color:#d3e4f1;
position:relative;
z-index:100;
border-right:1px solid #063;
border-bottom:1px solid #063;
height:31px;
width:150px;
}
#menu ul {
padding:0;
margin:0;
list-style-type:none;
}
#menu li {
float:left;
width:150px;
position:relative;
}
#menu a {
display:block;
text-decoration:none;
color:#006633;
height:30px;
background-color:#cdddca;
line-height:29px;
border:1px solid #063;
border-right:0;
border-bottom:0;
padding-left:10px;
}
#menu table {
position:absolute;
border-collapse:collapse;
top:0px;
left:0px;
}
#menu ul ul {
visibility:hidden;
position:absolute;
top:31px;
left:0px;
width:150px;
border-right:1px solid #063;
border-bottom:1px solid #063;
}
#menu a:hover {
color:#fff;
background-color:#949e6c;
}
/* 1st level sub items */
#menu ul :hover ul {
visibility:visible;
}
#menu ul :hover ul ul {
visibility:hidden;
}
/* 2nd level sub items */
#menu ul :hover ul :hover ul {
visibility:visible;
}
#menu ul :hover ul :hover ul ul {
visibility:hidden;
}
#menu ul ul ul {
left:150px;
top:0;
}
#menu .sub_left {
left:-150px;
}
/* 3rd level sub items */
#menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
#menu ul :hover ul :hover ul :hover ul ul {
visibility:hidden;
}
/* 4th level sub items */
#menu ul :hover ul :hover ul :hover ul :hover ul {
visibility:visible;
}
#menu ul :hover ul :hover ul :hover ul :hover ul ul{
visibility:hidden;
}
/* Make path visible */
#menu :hover > a {
color:#fff;
background-color:#949e6c;
---------------------------------------------------------------------------------------------------------
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Multi-level Dropdown Menu</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Link 1<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Link 1<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Sub Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Sub Link 1<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Sub Sub Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Sub Sub Link 1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Sub Sub Sub Link 1</a></li>
<li><a href="#">Sub Sub Sub Link 1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
---------------------------------------------------------------------------------------------------------
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
