Drupal: Expanded & Sliding Menus: Nice Menu Problem with IE6

Nice Menu Module: Problem with IE6

I installed nice menu module today and everything looked great. The menu sliding function seems to work perfectly though for a moment I felt reverting back to the original non sliding menu format as it should give more page views (because of more visible topics - just a guess) as compared to this.
Anyhow everything was good as long as I had not tested it on IE6. The problem on IE6 with nice menu is that it does not expands below level 1. Whenever I hovered my mouse on the parent menu, it will slide and expand it to level 1, but if I moved my mouse of sub menu at level 1 (again a parent menu), it will not expand it into level 2. I looked for support on the drupal site and the nice menu project to see how to fix this problem that is happening only with IE6.

After a lot of struggle I did not find anything really effective on the drupal site or other weblogs in regard to this problem. However I got mention of a site where this problem was fixed and everything was working. So I got hold of the css file used and I am posting the same CSS file here for your use. It should work and solve your problem too. I have modified it as per my need. This nicemenu.css works perfectly with firefox but has some spacing problem with opera and IE6. However it should at least get your menu expanded to its full without any problems. This is the best alternative I have been able to find as of now. You can use this CSS or modify it as per you need

To use this fix, I am posting the content of the entire css file right below. You can paste this in a css file, name it as nicemenu.css and upload it. It should fix your problem with nice menu in IE6 and it will show the menu levels beyond level 1.

nicemenu.css :
.block-nice_menus {
Z-INDEX: 10; LINE-HEIGHT: normal
}
UL.nice-menu {
PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 0px; Z-INDEX: 5; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL.nice-menu UL {
PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 0px; Z-INDEX: 5; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL.nice-menu LI {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 0px solid; FLOAT: left; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid; POSITION: relative; BACKGROUND-COLOR: #eee
}
UL.nice-menu A {
PADDING-RIGHT: 1px; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 0.3em; PADDING-TOP: 0.3em
}
UL.nice-menu UL {
BORDER-TOP: #ccc 1px solid; DISPLAY: none; BORDER-LEFT-WIDTH: 0px; LEFT: -1px; BORDER-BOTTOM-WIDTH: 0px; MARGIN-RIGHT: 0px; POSITION: absolute; TOP: 1.8em; BORDER-RIGHT-WIDTH: 0px
}
UL.nice-menu LI.over UL {
DISPLAY: block
}
UL.nice-menu UL LI {
DISPLAY: block; WIDTH: 12.5em
}
UL.nice-menu:unknown {
CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "."
}
UL.nice-menu LI:hover UL {
DISPLAY: block
}
UL.nice-menu LI.menuparent LI:hover UL {
DISPLAY: block
}
UL.nice-menu LI.menuparent LI.menuparent LI:hover UL {
DISPLAY: block
}
UL.nice-menu LI.over UL {
DISPLAY: block
}
UL.nice-menu LI.menuparent LI.over UL {
DISPLAY: block
}
UL.nice-menu LI.menuparent LI.menuparent LI.over UL {
DISPLAY: block
}
UL.nice-menu LI:hover UL UL {
DISPLAY: none
}
UL.nice-menu LI:hover UL UL UL {
DISPLAY: none
}
UL.nice-menu LI.over UL UL {
DISPLAY: none
}
UL.nice-menu LI.over UL UL UL {
DISPLAY: none
}
UL.nice-menu-right {
WIDTH: 10.5em
}
UL.nice-menu-left {
WIDTH: 12.5em
}
UL.nice-menu-right LI {
WIDTH: 12.5em
}
UL.nice-menu-left LI {
WIDTH: 11.0em
}
UL.nice-menu-right UL {
LEFT: 11.0em; WIDTH: 11.0em; TOP: -1px
}
UL.nice-menu-right UL UL {
LEFT: 11.0em; WIDTH: 11.0em; TOP: -1px
}
UL.nice-menu-right LI.menuparent {
BACKGROUND: url(arrow-right.png) #eee no-repeat right center
}
UL.nice-menu-right LI LI.menuparent {
BACKGROUND: url(arrow-right.png) #eee no-repeat right center
}
UL.nice-menu-right LI.menuparent:hover {
BACKGROUND: url(arrow-right.png) #ccc no-repeat right center
}
UL.nice-menu-right LI.over {
BACKGROUND: url(arrow-right.png) #ccc no-repeat right center
}
UL.nice-menu-right LI LI.menuparent:hover {
BACKGROUND: url(arrow-right.png) #ccc no-repeat right center
}
UL.nice-menu-right LI LI.over {
BACKGROUND: url(arrow-right.png) #ccc no-repeat right center
}
UL.nice-menu-left LI UL {
LEFT: -12.65em; WIDTH: 12.5em; TOP: -1px
}
UL.nice-menu-left LI UL LI UL {
LEFT: -12.65em; WIDTH: 12.5em; TOP: -1px
}
UL.nice-menu-left LI.menuparent {
BACKGROUND: url(arrow-left.png) #eee no-repeat left center
}
UL.nice-menu-left LI LI.menuparent {
BACKGROUND: url(arrow-left.png) #eee no-repeat left center
}
UL.nice-menu-left LI.menuparent:hover {
BACKGROUND: url(arrow-left.png) #ccc no-repeat left center
}
UL.nice-menu-left LI.over {
BACKGROUND: url(arrow-left.png) #ccc no-repeat left center
}
UL.nice-menu-left LI LI.menuparent:hover {
BACKGROUND: url(arrow-left.png) #ccc no-repeat left center
}
UL.nice-menu-left LI LI.over {
BACKGROUND: url(arrow-left.png) #ccc no-repeat left center
}
UL.nice-menu-left A {
PADDING-LEFT: 14px
}
UL.nice-menu-left UL A {
PADDING-LEFT: 14px
}
UL.nice-menu-down {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
UL.nice-menu-down LI {
BORDER-TOP: #ccc 1px solid
}
UL.nice-menu-down LI LI {
BORDER-TOP-WIDTH: 0px
}
UL.nice-menu-down UL {
LEFT: 0px
}
UL.nice-menu-down LI UL LI UL {
LEFT: 12.5em; TOP: -1px
}
UL.nice-menu-down .menuparent A {
PADDING-RIGHT: 15px
}
UL.nice-menu-down LI.menuparent {
BACKGROUND: url(arrow-down.png) #eee no-repeat right center
}
UL.nice-menu-down LI.menuparent:hover {
BACKGROUND: url(arrow-down.png) #ccc no-repeat right center
}
UL.nice-menu-down LI.over {
BACKGROUND: url(arrow-down.png) #ccc no-repeat right center
}
UL.nice-menu-down LI LI.menuparent {
BACKGROUND: url(arrow-right.png) #eee no-repeat right center
}
UL.nice-menu-down LI LI.menuparent:hover {
BACKGROUND: url(arrow-right.png) #ccc no-repeat right center
}
UL.nice-menu-down LI LI.over {
BACKGROUND: url(arrow-right.png) #ccc no-repeat right center
}
UL.nice-menu-down UL LI {
CLEAR: both
}
UL.nice-menu LI.menuparent UL {
OVERFLOW: visible! important
}
UL.nice-menu LI.menuparent LI.menuparent UL {
OVERFLOW: visible! important
}
UL.nice-menu LI.menuparent LI.menuparent LI.menuparent UL {
OVERFLOW: visible! important
}
UL.nice-menu LI.menuparent UL IFRAME {
DISPLAY: block; Z-INDEX: -1; FILTER: mask(); LEFT: 0px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 400px
}
UL.nice-menu LI.menuparent LI.menuparent UL IFRAME {
DISPLAY: block; Z-INDEX: -1; FILTER: mask(); LEFT: 0px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 400px
}
UL.nice-menu LI.menuparent LI.menuparent LI.menuparent UL IFRAME {
DISPLAY: block; Z-INDEX: -1; FILTER: mask(); LEFT: 0px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 400px
}


=====================================================================================

I hope this should help you fix the sliding menu problem with IE6. You can also look at the project support files for latest updates on nice menu, they may be able to fix this better.

Hope it helps!

PS: The demo site under construction and testing is : www.complete-acne-treatment.com/