IE7 CSS dropdown menu issue

Hi,

I'm confused. No amount of reading on google has helped so I'm hitting the forum.
I'm using the navigation module for a dropdown menu. Works great on FF and IE8, but IE7 is causing an issue and I can't fix it.

Ok, now for the odd bit with a long story which I won't go into, to see the site you'll need to add an entry to your host file.
188.40.116.149 free-mountain.ch

Then view http://free-mountain.ch (no www)

Hover the media menu and you'll see the drop down but in ie7 it's going behind the content.

Any ideas? I'm a novice when it comes to drop downs so feel free to abuse my css!

Heres my code

Code:

---

#mainmenu
{
        position:relative;
        list-style:none;
}
.level_1 li
{
        float:left;
}
.level_1 li a
{
        width:88px;
        display:block;
        padding:5px;
        text-align:center;
        background-image:url("tl_files/freemountain/site_images/transparent.png");
        background-repeat:repeat;
        border-right:1px solid #FFFFFF;
        font-weight:bold;
        text-decoration:none;
        color:white;
}
.level_1 li a:hover
{
        background:#CCCC00;
}
.level_1 li .last
{
        border-right:0px;
}
#mainmenu li.submenu ul
{
        height:25px;
        top:0;
        left:0;
        position:relative;
        display:none;
        padding-top:1px;
}
li.submenu ul
{
        z-index:1000;
}
li.submenu ul li
{
        clear:both;
}
#mainmenu li.submenu:hover ul
{
        display:block;
}

---

And the menu html output is...

Code:

---

<div class="mod_navigation block" id="mainmenu">

Skip navigation

<ul class="level_1">
<li class="active first">NEWS
[*]BIO[*]SPONSORS
<li class="submenu">MEDIA
<ul class="level_2">
<li class="first">GALLERY
<li class="last">VIDEO[/list]
[*]E-SHOP[*]ABOUT

<li class="last">LOGIN[/list]
 
<a name="skipNavigation2" id="skipNavigation2" class="invisible"></a>

</div>

---

Hi,

When I tried to visit the site, I was prompted for a un/pw.

My hunch is it is a z-index issue. IE7 and below treats z-index differently than other browsers in that it is dependent on it's parents. Here is the first result I found on Google about it: http://brenelz.com/blog/squish-the-inte ... index-bug/.

Experiment setting z-index's on the menus parents (z-index only works with the position: property) and your problem should go away.

Ok, will have a look at that. Thanks

(going directly to the IP will give a login but setting free-mountain.ch in your host file should work..)

Hi, Thanks for the tips.

I managed to get it sorted by applying a z-index:1000 on #header .inside