styling css menu with fly out in IE 6 not working

[ballr]

Hello,

I have been trying to style a CSS based menu specifically for IE6 (about a fourth of our users are on IE6). I can't figure out how to widen the area for the <li>. It is squeezed and causing the text to be split into multiple lines.

In addition, the "fly-out" part is working? Do I need the csshover.htc file for that to work?

AND to throw another wrench in the works, I am building the site and menu in Umbraco (open-source dot net CMS). Below is the CSS I'm using in the ie6_styles.css file.

/*	************************************************************
	Specialty Market Flyout Menu
	************************************************************
*/
.menu2{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
	width:325px; 
	height:160px; 
	position:absolute; 
	font-size:12px; 
	margin:0 0; 
	display:block;
}
.menu2 ul {
	padding:0; 
	margin:0 0 0 -10px; 
	list-style-type: none; 
	background:#eee; 
	width:325px; 
	height:160px; 
	border:1px solid #2356B6;
	display:block;
}
.menu2 ul li ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	overflow:hidden; 
	top:0; 
	left:200px;
	display:block;
}
.menu2 ul li {
	display:block;
	float:left;
	width:325px;
	
}
.menu2 ul li a, .menu2 ul li a:visited {
	display:block; 
	float:left; 
	text-decoration:none; 
	color:#999999; 
	height:auto; 
	line-height:25px; 
	width:190px; 
	background:transparent; 
	padding-left:10px;
}

//////* end top level of fly out menu *///////


* html .menu2 ul li a, * html .menu2 ul li a:visited {
	width:100px; 
	w\idth:90px;}

.menu2 table {
	border-collapse:collapse; 
	border:0; 
	margin:0; 
	padding:0px; 
	font-size:0em; 
	position:absolute; 
	left:0; 
	top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */

.menu2 ul li:hover a,
.menu2 ul li a:hover{
	background:#2356B6; 
	color:#fff;
}

.menu2 ul li:hover {position:relative; z-index:100;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}

.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	height:auto; 
	border:1px solid #2356B6; 
	background:#7a7a7a;
	padding: 0 15px 0 0; 
	overflow:visible;
	width:250px;
}
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
	display:block; 
	background:transparent; 
	color:#fff; 
	line-height:15px; 
	padding:5px 0 5px 10px; 
	height:auto; 
	text-decoration:underline; 
	width:250px;
}

.menu2 ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover {
	background:#2356B6; 
	color:#fff; 
	width:250px;
}
.menu2 ul li:hover ul li ul,
.menu2 ul li a:hover ul li a ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	overflow:hidden; 
	top:0; 
	left:105px;
}
.menu2 ul li:hover ul li:hover ul,
.menu2 ul li a:hover ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	height:auto; 
	color:#000; 
	padding:0; 
	border:1px solid #2356B6; 
	list-style-type:none; 
	background:#7a7a7a;
}
.menu2 ul li:hover ul li:hover ul li a,
.menu2 ul li a:hover ul li a:hover ul li a {
	display:block; 
	background:transparent; 
	color:#fff;
}

.menu2 ul li:hover ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover ul li a:hover {
	background:#2356B6; 
	color:#fff;
}

/*	************************************************************
	End Specialty Market Flyout Menu
	************************************************************
*/

If you want to see the menu you can try this link - http://beta.testamericainc.com/servi...r-testing.aspx

Thanks for all of your help!!!! I'm tired of banging my head on the desk! ;-)

[the penguin]

http://www.cnn.com/2010/TECH/web/06/...?iref=obinsite

[umbracouser]

I am also using Umbraco Navigation with dropdown. I am trying to solve the dropdowns with CSS and with no luck. Could you pass out the CSS if possible. That could help me solve the issue I have. Actually, my CSS works great with FF but not with IE.Here is the CSS that I use currently.

#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*width: 12em;*/
float: left;
}

#menu a{
font: bold 12px/16px arial, helvetica, sans-serif;
display: block;
border-width: 0px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 0px 0px;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
width:125%;
margin: 0 px;
padding: 0px 0px;
border-color: #ccc #888 #555 #bbb;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}