css wrecking my head. popup menus

whiteshadow

http://crowleys.micksmedia.com/

if you scroll over the nav you see popup menus in Firefox but not in IE 6

It is based on this from alistapart.
http://crowleys.micksmedia.com/testing2.html

I had to edit this style sheet so that not all <ul>'s would have
the style of the nav so the style looks like this.

#navlist{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#660000;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin-top:3px;
}

#navlist ul {
	margin: 0; /*removes indent IE and Opera*/
	padding: 0; /*removes indent Mozilla and NN7*/
	list-style-type: none; /*turns off display of bullet*/
	font-size: 12px;
	z-index: 2;
 	background-image:  url("../images/navgrad.jpg"); 
	}

#navlist ul li {
	position: relative;
	padding: 0px 0px 0px 0px;
	z-index: 3;
	}
	
#navlist ul li ul {
	position: absolute;
	display: none;
	left: 161px; /* Set 1px less than menu width */
	top: 0px;
	padding: 0px 0px 0px 0px;
	z-index: 4;
	border-bottom: 1px soild #660000;

	}

/* Styles for Menu Items */
#navlist ul li a {
	display: block;
	padding: 3px 0px 3px 0px;
	border-bottom: 1px solid #fff; 
    background: #728D25; /* IE6 Bug */
	width: 161px;
	background-color: #728D25;
 	background-image:  url(../images/navgrad.jpg); 
	}

#navlist ul li ul li a {
	display: block;
	padding: 3px 0px 3px 0px;
	margin: 0px;
	background-color:#88952C;
	background: #88952C; /* IE6 Bug */
 	height: 15px;
	border-bottom: 1px solid #fff; 
	border-left: 1px solid #fff; 
	}


#navlist ul li a:link, #navlist ul li a:visited {
	color: #fff;
	font-weight:bold;
	text-decoration: none; /* */
}

/* Fix IE. Hide from IE Mac \*/
* html #navlist ul li { float: left; height: 1%; z-index: 5; }
* html #navlist ul li a { height: 1%;  z-index: 5; }
/* End */

#navlist ul li a:hover {
/*	border: 0px solid #C30019;*/
	background-color: #ff6600;
	color: #FFFDEA;
	background-image:  url(../images/navbackon.jpg);  
}
		
#navlist li ul li a { padding: 0px 0px; z-index:6; } /* Sub Menu Styles */


 /* The magic */		
#navlist li:hover ul, #navlist li.over ul { 
display: block;  
z-index: 6; 
padding:none;
margin:none;
}

Ive been trying to figure this out for days and am stumped..
anyone please have any ideas on how to help?

mewso

All of the css solutions for drop down menus use javascript to make it work in IE. Basically you have left out the .over class from your stylesheet which the javascript adds to the class declaration for the li tags when the mouse hovers over them.

whiteshadow

thanks for the reply luke.

but i think i've got the .over class

/* The magic */
#navlist li:hover ul, #navlist li.over ul {
display: block;
z-index: 6;
padding:none;
margin:none;
}

it's a bit messy but i guess if
http://crowleys.micksmedia.com/testing2.html
works then it just must be a bit of a workaround needed.

p.s. have you got IE 6 or 7 installed?
and if you have 7 does the following popup menu work for you
http://crowleys.micksmedia.com/testing2.html