Chrome CSS Menu is Wacky on IE6

[msmith0957]

1) Script Title:
Chrome CSS Drop Down Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:
So I've made various changes to the original css document provided with the script, and I guess I must have somehow killed IE6 in the process. When viewing in IE6, the dropdown menu is stretched out very far to the left so that none of the items are even visible anymore. Any help would be greatly appreciated.

the page in question [WIP]: http://s194254623.onlinehome.us/newksb/

the css styles:

/* #### Styles for Navigation #### */

#nav1, #nav2, #nav3, #nav4, #nav5, #nav6, #nav7, #nav8, #nav9 {
	margin:4px 1px 4px 3px;
	height:22px;
	background-repeat:no-repeat;
	background-image:url(../images/nav-text.png);
}

#nav1, #nav1:hover { width: 62px; }
#nav2, #nav2:hover { width: 72px; }
#nav3, #nav3:hover { width: 68px; }
#nav4, #nav4:hover { width: 53px; }
#nav5, #nav5:hover { width: 110px; }
#nav6, #nav6:hover { width: 75px; }
#nav7, #nav7:hover { width: 74px; }
#nav8, #nav8:hover { width: 88px; }

#nav1 			{ background-position:0 0; }
#nav1:hover		{ background-position:0 -22px;}
#nav2 			{ background-position:-81px 0;}
#nav2:hover		{ background-position:-81px -22px;}
#nav3 			{ background-position:-171px 0;}
#nav3:hover		{ background-position:-171px -22px;}
#nav4 			{ background-position:-258px 0;}
#nav4:hover		{ background-position:-258px -22px;}
#nav5 			{ background-position:-329px 0;}
#nav5:hover		{ background-position:-329px -22px;}
#nav6 			{ background-position:-457px 0;}
#nav6:hover		{ background-position:-457px -22px;}
#nav7			{ background-position:-550px 0;}
#nav7:hover		{ background-position:-550px -22px;}
#nav8			{ background-position:-643px 0;}
#nav8:hover		{ background-position:-643px -22px;}

.chromestyle {
	position:relative;
	float:right;
	width: 664px;
	height: 42px;
	font-weight: bold;
}
.chromestyle:after { /*Add margin between menu and rest of content in Firefox*/
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.chromestyle ul {
	padding-left: 4px;
	margin-top: 8px;
	text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li {
	float:left;
}
.chromestyle ul li a {
	color: #FFF;
	text-decoration: none;
}

.chromestyle ul li a span {
	visibility:hidden;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected { /*script dynamically adds a class of "selected" to the current active menu item*/
	margin-top:10px;
	padding-bottom:19px;
}
/* ######### Styles for Drop Down Menu ####### */

.dropmenudiv {
	position:absolute;
	top: 0;
	line-height:18px;
	background-image:url(../images/bg-black-90p.png);
	width: auto;
	padding-right:24px;
	visibility: hidden;
}
.dropmenudiv a {
	text-align:left;
	width: auto;
	display: block;
	padding: 1px 0;
	text-decoration: none;
	color: #FFF;
}

.dropmenudiv ul li {
	text-indent:24px;
	font-size:12px;
}

.dropmenudiv ul li h3 {
	font-size:14px;
	text-indent:4px;
	text-decoration:underline;
	font-weight:bold;
}
* html .dropmenudiv a { /*IE only hack*/
	width: 100%;
}
.dropmenudiv a:hover { /*THEME CHANGE HERE*/
	color: #FFFFBE;
}

Also, if you would like to provide any recommendations of any sort, please feel free

[msmith0957]

Ok.. I solved this stretching issue.. aparently I never fixed the "ie hack" that's in the style sheet which is actually what was causing me the problem. But the only problem remaining now is that all the hyperlinks are not click-able. What's the deal ?

[msmith0957]

OK nevermind.. sorry for wasting everybody's (anybody's ?) time on this one.. I realized I was missing a z-index:100 rule from the original css and that was somehow the fix I needed to get the hyperlinks active again.