Fixed (see second post): Dropdown menus disappear under images in IE7
One of my sites uses an on-click image menu which is fine in IE6 and FF3, Opera etc., but now, in IE7 (only IE7 as far as I know) the menus appear under the images instead of on top - so they are fairly useless. :(
I have tried increasing the z order to 10000 in um.orientation but this does not help. The site is http://ec.europa.eu/research/star/index_en.cfm?p=6 Any solutions? |
Fix found, I think!
Having read about similar problems elsewhere, I added a z-index to each main <li> tag of the menu, using decreasing values so that the top item can overlay the lower ones and so on.
Example: <ul id="udm" class="udm"> <li class="onclick" id="agrifood" style="z-index:10000"><a id="agrifoodButton" class="navButton" href="index_en.cfm?p=zz_sitemap#agrifood" name="agrifood" title="Click for projects in the area of Agriculture and Food"><span></span>Agriculture & Food</a> <ul> <li ><a href="index_en.cfm?p=61" title="Biotech advances in wine production">Biotech advances in wine production</a> </li> <li><a href="index_en.cfm?p=63" title="Crusts, Crumbs and Chromatography">Crusts, Crumbs and Chromatography</a> </li> <li><a href="index_en.cfm?p=64" title="Food allergies">Food allergies</a> </li> </ul> </li> <li class="onclick" id="education" style="z-index:9900"><a id="educationButton" class="navButton" href="index_en.cfm?p=00_intro" name="education" title="Click for projects in the area of Education"><span></span>Education</a> <ul> <li><a href="index_en.cfm?p=03_intro" title="PANS">Public awareness of nuclear science</a> </li> <li><a href="index_en.cfm?p=07" title="Serious games">Serious games</a></li> </ul> </li> </ul> I tried the z-index in the id but this did not work, indeed it made things worse in other browsers, hence the use of style in each line here, which works for IE7 and does not harm IE6, Firefox or Opera. I've yet to try Chrome. |
Have you tried setting the z-index on any containing div outside <ul class="udm">?
|
Reply to Colech
Quote:
|
Quote:
The CSS: Code:
.mainMenu { Code:
<div id="mainMenu"> |
All times are GMT. The time now is 03:02 AM. |
Powered by vBulletin® Version 3.0.1
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.