CSS help requested: Work around for IE6 incompatibility

Assignment specification: 1) Our CSS style sheet works for Firefox and IE7 --- but breaks for IE6. 2) We need a workaround to fix the problem for IE6. 3)In short: Adjust the CSS coding in the attached file [login to view URL] so that it is displayed equally in IE6, IE7 and Firefox. 4)The attached screenshot [login to view URL] shows the desired result (how the code is displayed in Firefox). 5)You can only change the CSS section of the file --- achieving the same output with different HTML coding is not acceptable for our project. 6)Really, you should put all your coding into the css section below line 56 of the file [login to view URL]: This section is only parsed in IE6 7) If you need to change other parts of the CSS style sheets, please explain why it can't be done within this conditional css section. Changes to the HTML coding are not acceptable for this assignment. In this assignment, you don't need to support other browsers except IE6, IE7 and Firefox (IE7 and Firefox already work). Also, it's ok if the hover-effect doesn't work in IE6. Background information: This information is not part of the assignment. It may help you to understand our problem or to find a hint how to solve the problem. This is part of a DHTML menu along the lines of [login to view URL] with some changes to the HTML style (simpler list layout) and to the CSS. In particular, our coding displays properly if the menu contains text entries that are not links. We already know how to get the DHTML effects working on IE6. Hence, DHTML functionality is NOT included in this assignment. The corresponding CSS coding has been removed from the style sheet. Our problem is that in IE6 some list entries are displayed incorrectly (they collapse). This is what we want to fix. Once IE6 displays the static menu correctly, we put back the dynamic elements. This will hide those parts of the menu that are not currently active.