IE7 CSS dropdown menu issue

[vinchenzison]

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

#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...

<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>

[Medianomaly]

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.

[vinchenzison]

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..)

[vinchenzison]

Hi, Thanks for the tips.

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