Need Help with flyout menu issues in Internet Explorer

Hi,

I am finishing up a new design for an old client and having trouble finding 2 problems that are caused by the css code for the flyout menu in I/E.

The web site: http://www.griefcounselor.org/new/index.html

The problems: The flyout menu simply does not work in I/E.b The css code for the flyout menu is also causing each link on the page to be placed on a separate line. You can see this problem clearly in the breadcrumb trail links and the footer links.

The css code:

/* Start of Fly-Out Menu \*/

#leftcolumn { width:180px; height:400px; float:left; background-color:#2c4486; }

#leftcolumn #nav {font-size: 11pt; margin: 0px; font-family: arial; color: #FCC900;}

ul, li {
display: block;
margin: 0;
padding: 0;
border: 0px none;
}

ul {
width: 176px;
background: #2c4486;
list-style-type: none;
}

li {
position: relative;
padding: 0px;
z-index: 9;
}

li.folder {
font: normal 11pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #EBDE78;
padding: 2px 0 4px 5px;
background-color: #2c4486;
border : 0px;
}

li.folder:hover {
z-index: 10;
background-color: #FCC900;
font: normal 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #2c4486;
}

li.folder ul {
position: absolute;
display: none;
left: 160px; /* IE */
top: 5px;
}

li.folder>ul {
left: 160px;
}

ul.level1 li.folder:hover ul.level2 {
display: block;
width: 200px;
}

a {
padding: 2px;
text-decoration: none;
width: 100%; /* IE */
}

li>a {
width: auto;
}

li a.topmenu {
padding-left: 1px;
font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #FCC900;
display: block;

}

li a.submenu {
background-color: #2c4486;
padding-left: 5px;
font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #FCC900;
display: block;
border : 0px;
padding-top: 3px;
padding-bottom: 4px;
}

li.submenu:hover {
z-index: 10;
background-color: #FCC900;
font: normal 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #2c4486;
}

li.explain {
font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
background-color: #2c4486;
border : 0px;
color: #FCC900;
padding-left: 10px;
padding-top: 4px;
padding-bottom: 4px;
width: 190px;
}

a.topmenu:visited {
color: #FCC900;
}

a.topmenu:hover {
color: #FCC900;
background-color: #2c4486;
}

#menu {
border: 0px;
margin: 0;
padding: 0;
width: 160px;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html li.explain {
width: 180px;
}
/* End hide from IE5/mac */

a.topmenu:hover {
color: #2c4486;
}

#menu {
border: 0px solid #000000;
margin: 0;
padding: 0;
width: 160px;
}

#link {
font: 11px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
padding: 0px 0px 0px 0px;
margin-top: 0px;
}

/* End of Flyout Menu */

-->

Any help you can give me would be very much appreciated.

Thanks