Dropdown menus disappear under images in IE7

[gosdest]

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?

[gosdest]

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.

[colech]

Have you tried setting the z-index on any containing div outside <ul class="udm">?

[gosdest]

Originally Posted by colech

Have you tried setting the z-index on any containing div outside <ul class="udm">?

Thanks for the suggestion - in fact I found a solution and posted it in the thread above some time ago. what I did was this: 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. That works!

[colech]

Originally Posted by gosdest

Thanks for the suggestion - in fact I found a solution and posted it in the thread above some time ago. what I did was this: 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. That works!

I've had the same problem, but here is the much easier way to get it to work. There are a lot less chance of error doing it this way. Let me know if it doesn't work for you...

The CSS:

.mainMenu {
  z-index:10000;
}

The HTML:

<div id="mainMenu">
  <ul class="udm" id="udm">
    <li>
      ...
    </li>
  </ul>
</div>