I’m trying to get a suckerfish style dropdown menu to work in IE6 using whatever:hover but cant for the life of me get the 3rd level to display! Its driving me nuts any help on this would be greatly appreciated.
Heres the code
HTML:
<!DOCTYPE html>
<html>
<body>
<header>
<link rel="stylesheet" type="text/css" href="styleIE.css" />
</header>
<form>
<div id="container">
<div id = "menu">
<ul id="nav">
<li><a class="rhlinkstart" href="#"><span>Home</span></a></li>
<li><a class="rhlink" href="#"><span>Blad<br> Securities</span></a></li>
<li><a class="rhlink" href="#"><span>Market<br> Update</span></a></li>
<li><a class="rhlink" href="#"><span>Membership</span></a></li>
<li><a class="rhlink" href="#"><span>asdasd Info</span></a>
<ul>
<li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.gif" alt="►">About the DOOB</a>
<ul>
<li><a class="linkchild" href="#">DOOB Explained</a></li>
<li><a class="linkchild" href="#">DOOB Jurisdications</a></li>
</ul>
</li>
<li><a class="linkchild" href="#">International Recogintion</a></li>
<li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.gif" alt="►">Advantages of listing</a>
<ul>
<li><a class="linkchild" href="#">Advantages of Listing</a></li>
<li><a class="linkchild" href="#">Offers</a></li>
</ul>
</li>
<li><a class="linkchild" href="#">Advantages Of Membership</a></li>
<li><a class="linkchild" href="#">Publications</a></li>
<li><a class="linkchild" href ="#">Links</a></li>
</ul>
</li>
<li><a class="rhlinkend" href="#"><span>Contact Us</span></a></li>
<li> </li>
</ul>
</div>
</div>
</form>
</body>
</html>
CSS:
body{
line-height:1;
background: #e3e3e3;
behavior: url("csshover3.htc");
}
/*------------------------------------*\
Main
\*------------------------------------*/
div#container
{
width:1024px;
margin:0 auto;
position: relative;
text-align: center;
background-color: white;
border: 1px solid #8b8b8b;
}
.contentwrapper {
width: 964px;
margin: 0px auto;
text-align: left;
height: 100%;
}
.clearall {
clear: both;
}
/*------------------------------------*\
Home Page - Menu Styling
\*------------------------------------*/
#menu {
margin: 0 auto;
padding-left: 2%;
height: 47px;
position: relative;
top: 0;
border: 1px solid rgb(140,51,61);
font-size: 75%;
display: block;
}
#nav {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
height:47px;
background: none;
background-color: transparent;
width: 100%;
}
#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
}
#nav a.rhlinkstart:link, #nav a.rhlinkstart:active, #nav a.rhlinkstart:visited {
position: relative;
float:left;
font-family: Georgia;
color: rgb(131,0,26);
width: 148px;
text-align: center;
height: 47px;
margin-right: -.07em;
margin-left: 0.5em;
line-height: 47px;
text-decoration: none;
}
#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
position: relative;
float:left;
font-family: Georgia;
color: rgb(131,0,26);
width: 148px;
text-align: center;
height: 47px;
margin-left: -47px;
line-height: 47px;
text-decoration: none;
display: block;
}
#nav a.rhlinkend:link, #nav a.rhlinkend:active, #nav a.rhlinkend:visited {
float:left;
position: relative;
color: rgb(131,0,26);
width: 148px;
height: 47px;
line-height: 47px;
margin-left: -3.780em;
font-family: Georgia;
text-decoration: none;
}
#nav li {
float:left;
position:relative;
display: block;
}
li a.rhlink span {
line-height: 1em;
text-decoration: none;
text-align: center;
display: inline-block;
vertical-align: middle;
}
#nav li a.rhlink:hover,
#nav li a.rhlinkstart:hover,
#nav li a.rhlinkend:hover
{
background: red;
color: white;
text-decoration: none;
}
#nav a.linkchild:link,
#nav a.linkchild:active,
#nav a.linkchild:visited
{
display:block;
padding:0px 10px;
text-decoration:none;
color: white;
background: pink ;
}
#nav a.linkchild:hover {
background: rgb(118,0,18);
color: white;
}
#nav ul {
position:absolute;
top:47px;
left:0;
margin: 0;
width:200px;
display:none;
}
#nav li ul a {
width:15em;
float:left;
display: inline-block;
line-height: 2.5em;
text-align: left;
vertical-align: middle;
}
#nav li {
display: inline-block !important;
float: left;
}
#nav li a {
display: inline-block !important;
vertical-align: middle;
}
#nav ul ul {
top:auto;
}
#nav li ul ul {
left:200px;
margin:0;
}
#nav ul ul li ul {
left:200px;
margin:0;
}
#nav ul ul {
display:none;
}
#nav li:hover ul {
display:block;
}
/* 2 and 13 */
#nav ul ul,
#nav li:hover ul ul {
display:none;
}
/* 12 and 23*/
#nav li:hover ul, #nav li:hover li:hover ul {
display:block;
}
Thanks for the comments guys, in the end I rewrote the menu from scratch and got it working in IE6. I know IE6 is dead but my clients biggest client uses this browser 🙁 so it had to be done.