Problem with Drop down/ Overlapping Content script in IE

[sumer]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: Script is working perfectly with Firefox, Safari and Opera but in IE when I attempt to mouse over the drop down content it disapears.

I cant work it out.

Here is the page in question:


Here is the css for the drop down content:

#menu_items{background:#f8f8f8; margin-top: 3px; width: 200px; padding: 10px; text-align: left; color: #06c; border: 1px #ccc solid;border-bottom: 1px #ccc solid; line-height: 15px;}
#menu_items2{background:#f8f8f8; margin-top: 3px; width: 220px; padding: 10px; text-align: left; color: #06c; border: 1px #ccc solid;border-bottom: 1px #ccc solid; line-height: 15px;}
#menu_items3{background:#f8f8f8; margin-top: 3px; width: 200px; padding: 10px; text-align: left; color: #06c; border: 1px #ccc solid;border-bottom: 1px #ccc solid; line-height: 15px; text-align: right;}


Any help would be much appreciated.

Phil

[jscheuer1]

In IE, due to the lack of background to the about_content and similar divisions (the drop downs), IE thinks that the mouse is off of them while passing over their transparent regions. Add:


background-color:white;

to their style. Example:


<div id="about_content" style="background-color:white; position:absolute; visibility: hidden; padding-top: 10px;">

[sumer]

Thanks very much John, thats fixed it.
:)

[jscheuer1]

You're welcome. There is a more complex solution that can maintain the transparent sections, at least in IE 7 and non-IE browsers, perhaps even in IE 6 and 5.5. But I won't go into that unless you are sincerely interested. It would involve applying separate styles depending upon which version of IE was being used to view the page.