IE 6 UL Dropdowns not dropping?! * other browsers fine?

[scotchegg78]

HI Guys

 

I am pulling my hairs out over this, for some reason the drop downs in IE 6 are not dropping down?

 

Can anyone spot the reason for this? IE7 , fox etc all seem ok.

 

.menu {
position:relative;
z-index:2;
top:-92px; /* moved up to account for picture drop down extra px */

}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding-top:92px;
margin:0;
list-style-type:none;
}
.menu ul ul {
/*width:150px;*/
text-align:left;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
text-decoration:none; 
color:#fff; 
width:160px;
height:36px;  
/*background:#758279; */

}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:31px;
/*width:120px;*/
}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
/*background:#d4d8bd; */ 
color:#FFF; 
height:auto; 
line-height:1em; 
padding:6px 0px 5px 5px; 
width:96%; /*Menu width */

}



/* style the top level hover */
.menu ul ul a:hover, .menu ul ul a:hover{
color:#000;
background:#ffffff;
filter:alpha(opacity=40);
}
.menu ul ul :hover > a, .menu ul ul :hover > a {
color:#000;
background:#ffffff;
filter:alpha(opacity=40);
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}

#id{
margin:0;

}

.oneLine{
line-height:32px;
}

.twoLine{
line-height:16px;

}

/*Menu 1 */

.gold{
float:left;
position:relative;
width:170px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarLeft.jpg) no-repeat right;
z-index:2;

}
.gold:hover{
float:left;
position:relative;
width:170px;
height:128px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar1.png);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;

}

li.gold ul{
padding-left:0px;
background-image:url(images/Menu/menu1btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:165px;
left:2px;

}

.gold li{
padding-top:0px;
width:165px;/*sets width of list*/
padding-left:0px;
background-color:#DDAF01;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu1li.gif);
background-repeat:no-repeat; 
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
padding-bottom:4px;
}
.gold li a{
width:165px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;

}
/*Menu 2 */
li.bronze ul{
padding-left:0px;
background-image:url(images/Menu/menu1btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:165px;
left:2px;
}

.bronze{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right;
}

.bronze:hover{
float:left;
position:relative;
width:160px;
height:123px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar2.gif);
display:block;

}
.bronze li{
width:160px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
background-color:#ee7e0d;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
left:2px;/*brings list in*/

}
.bronze li a{
width:160px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
background-color:#ee7e0d;
font-size:10px;
display:block;
position:relative;
left:2px;/*brings list in*/

}

/*Menu 3 green*/

.green{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right;
z-index:2;

}
.green:hover{
float:left;
position:relative;
width:160px;
height:128px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar3.gif);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;

}

li.green ul{
padding-left:0px;
background-image:url(images/Menu/menu3btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;

}


.green li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#48af53;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu3li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.green li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#48af53;
}

/*Menu 4/purple */
.purple{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right;
z-index:2;

}
.purple:hover{
float:left;
position:relative;
width:160px;
height:128px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar4.gif);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;
}

li.purple ul{
padding-left:0px;
background-image:url(images/Menu/menu4btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;
}


.purple li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#ba23e9;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu4li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.purple li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#ba23e9;
}

/*Menu 5/blue */
.blue{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right top;
z-index:2;

}
.blue:hover{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar5.gif);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;
}

li.blue ul{
padding-left:0px;
background-image:url(images/Menu/menu5btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;
}


.blue li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#0894d8;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu5li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.blue li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#0894d8;
}

/*Menu 6/ pink */
.pink{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarRight.jpg) no-repeat right top;
z-index:2;
display:block;

}
.pink:hover{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar6.jpg);
background-position:top;
padding-bottom:2px;
z-index:2;
}

li.pink ul{
padding-left:0px;
background-image:url(images/Menu/menu6btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;
}


.pink li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#dc0cac;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu6li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.pink li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#dc0cac;
}

/***************************************** SUB MENUS **************************************/ 

.submenu{
float:left;
position:relative;
width:179px;
margin:0;
padding:0;

}

#menu_sub_top{
background-image:url(images/Menu/menu_sub_top.gif);
background-position:top left;
background-repeat:no-repeat;
margin:0;
padding:0;
height:15px;
width:180px;
margin-right:5px;
margin-top:5px;
}

#menu_sub_btm{
background-image:url(images/Menu/menu_sub_btm.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:10px;
margin:0;
padding:0;
width:180px;
margin-right:5px;
}

#submenu{
width:180px;
margin-right:5px;
}

#submenu ul{
width:180px;
list-style:none;
font-size:8pt;
text-align:left;
padding-left:0px;
padding-top:0px;
padding-bottom:8px;
background-color:#48af53;
position:relative;
margin:0;
}
#submenu ul li a{
text-decoration:none;
color:white;
padding-left:11px;
}

#submenu ul li{
height:20px;
background-image:url(images/Menu/menu_sub_fil.gif);
background-position:bottom left;
background-repeat:no-repeat;
padding-bottom:5px;
padding-left:3px;
margin:0;
width:180px;

}
#submenu ul li a:hover{
background-image:url(images/Menu/left_arrow.gif);
background-position:left center;
background-repeat:no-repeat;
padding-left:11px;

}

#submenu ul li a.oneLine{
line-height:16px;
}

 

and sample list..

 

<div class='menu'>
            <ul id='nav'>
<li class='bar oneLine gold'>top list 1

<ul>
<li class=''><a class='oneLine ' href='sub menu 1'>sub menu 1</a></li>
<li class=''><a class='oneLine ' href='sub menu 2'>sub menu 2</a></li>
<li class=''><a class='oneLine ' href='sub menu 3'>sub menu 3</a></li>
</ul>
</li>
<li class='bar oneLine green'>top list 2

<ul>
<li class=''><a class='oneLine ' href='sub menu 1'>sub menu 1</a></li>
...

 

many many thanks for any help with this.

[ToonMariner]

have you googled 'sucker fish menu'

[bronzemonkey]

Go back to where you ripped this menu from - www.cssplay.com - and look at the source html.