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/services/specialty-services/source-air-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/01/ie6.nearing.extinction.mashable/index.html?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;}