Dropdown CSS Menu - IE woes

[lyma-bean]

Please help me fix this? I am working blind with no Internet Explorer/PC to test on.. The client says it doesn't work but apparently IE 6 does..

Site has a 2 level drop down menu with hover features and I have it working perfectly on every other browser.. Trying the whatever:hover script but I can't even test that...
Can someone please have a look at this page in IE (version 6, 7 and/or 8). There should be 4 links dropping down beneath the Workwear tab. Do they look/function ok or does it run off the page at all?

I've uploaded the whatever:hover script to the server and added the csshover.htc behaviour to the stylesheet as follows :

body      {
	color: #dedede;
	font-size: 11px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	background-color: #222222;
	margin: 0;
	background-position: left;
	behavior: url("csshover3.htc");
}

	
#menu {
	width: 178px;
	border-size: 1px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #696969;
	font-size: 7pt;
	font-family: "Myriad Pro", Verdana, Helvetica, "Sans Serif";
	letter-spacing: 0.1em;
	text-indent: 1pt;
	font-style: normal;
	margin-top: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-align: right;
	background-position: right top;
	background-color: #343434;
	border-right-color: #696969;
	border-bottom-color: #696969;
	border-left-color: #696969;
	}
	
html>body #menu {
    font-size: 8pt;
	margin-left: -40px;
}

#menu ul{
	list-style:none;
	margin-top: 2px;
	text-align: left;
	padding: 0;
	margin: 0;
	list-style: none; 
	line-height: 1;
	}
	
#menu li a {
	height: 12px;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 13px;
	text-decoration: none;
	font-weight:normal;
	padding-bottom: 2pt;
	padding-top: 3pt;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #222222;
	border-right-color: #222222;
	border-right-width: thin;
	border-right-style: solid;
	text-indent: 3px;
	}	
	
#menu li a:link, #menu li a:visited {
	color: #FFFFFF;
	display: block;
	text-align: right;
	}
	
#menu li a:hover {
	color: #FFFFFF;
	background-color: #252525;
	background-image: url(images/arrowsw.gif);
	background-repeat: no-repeat;
	background-position: 2px center;
	}
	
#menu li a:active {
	background-color: #CC0000;
	}

  
#menu li > ul {
	top: auto;
	right: auto;
	}

#menu li:hover ul { 
	display: block; 
	clear: right 
	}
	
#menu li ul { /* second-level lists */
	display : none;
	position : relative;
	left: -999em;
	margin-left : 0em;
	margin-top : 0em;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: none;
	border-bottom-style: none;
	background-color: #5B5B5B;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: none;
	border-left-style: none;
	}
	
#menu li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
		left: -999em;
	}
	
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul { /* lists nested under hovered list items */
	left: 0px;
	}

Does this look like it could work? Apologies for the messy code.

If there is any readily available IE emulator I could use on a PPC mac that would also help a great deal.

Am desperate and very grateful for any advice.
Thanks!

 

[Logan]

I see what your problem is, but I since I don't have behavior file or the javascript, I can't tell you what's causing it. I do notice, however, that your stylesheet sets style attributes to the list on the 2nd level, but the display property there is set to none. That looks a little funny to me... Remember that IE is very funny when it comes to CSS, you've got to write a few fixes into your classes to get it to display properly. Things like width: 800px !important; go a long way to making the site look like you want it to.

My only suggestion would be to go and check your behavior and javascript again.

 

[PixelPusher]

lyma-bean,

I am not sure the if this will help you, but i created a drop down menu example in a previous post: Drop Down. You would need to adjust the alignment and styling so it matches your website. My version works in IE8, Safari 4, FF 3, Chrome, and Opera 9.

In regards to your website, the drop down does work in IE8.