javascript dropdown menu probleem in IE

[marcel03]

Hallo,

Ik heb een dropdown menu gemaakt m.b.v. javascript. Dit werkt goed in zowel IE als firefox.

Nu heb ik een pagina waar ook javascript in verwerkt is. Het dropdown menu werkt wel in firefox (het valt "over" de pagina naar beneden). Echter in IE blijft het menu achter de pagina waar javascript in verwerkt is.

Wie heeft een idee wat het probleem zou kunnen zijn?

Ik gebruik:
- Firefox 3.0.3
- IE 7.0.xxx

 

[th76]

Erg weinig info, maar misschien dat het met de z-index te maken heeft.

http://www.w3schools.com/Css/pr_pos_z-index.asp

 

[marcel03]

Ik heb de waarden van de z-index ook al aangepast. Helaas zonder resultaat.

 

[Glest]

In IE6 werden niet-relatieve elementen nog wel eens achter relatieve elementen geplaats. Maar in IE7 is dit verholpen geloof ik. Kun je een link geven naar je script in actie?

 

[marcel03]

Hi Glest,

Het script draait nog op mijn test-server thuis.
Hieronder vind je echter menu.php en menu.css, misschien heb je hier wat aan.

MENU.PHP

<style media="all" type="text/css">@import "menu/menu.css";</style>

<div class="wrapper1">
	<div class="wrapper"  style="width:580px;">
		<div class="nav-wrapper">
			<div class="nav-left"></div>
			<div class="nav">
				<ul id="navigation" style="width:518px;">

					<li class="#">
						<a href="" target="_self">
							<span class="menu-left"></span>
							<span class="menu-mid">Admin Panel</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
         			   					<li>
									<a href="jw_index.php" target="_self">Home</a>
								</li>
         			   					<li>
									<a href="logout.php" target="_self">Uitloggen</a>
								</li>
			   				</ul>
					</li>

					<li class="#">
						<a href="" target="_self">
							<span class="menu-left"></span>
							<span class="menu-mid">Content</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
         			   					<li>
									<a href="artikel.php" target="_self">Artikel Manager</a>
								</li>
   					            <li>
									<a href="categorie.php" target="_self">Categorie Manager</a>
								</li>
   					            <li>
									<a href="foto.php" target="_self">Foto Manager</a>
								</li>
			   				</ul>
					</li>

					<li class="#">
						<a href="" target="_self">
							<span class="menu-left"></span>
							<span class="menu-mid">Statistieken</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
         			   					<li>
									<a href="stats_visits.php" target="_self">Bezoekers</a>
								</li>
         			   					<li>
									<a href="stats_data.php" target="_self">Data</a>
								</li>
			   				</ul>
					</li>

					<li class="#">
						<a href="" target="_self">
							<span class="menu-left"></span>
							<span class="menu-mid">Beheer</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
		   					    <li>
									<a href="adm.php" target="_self">Beheerder</a>
								</li>
   					            <li>
									<a href="backup.php" target="_self">Backup</a>
								</li>
								<li>
									<a href="eventlog.php" target="_self">Logboek</a>
								</li>
			   				</ul>
					</li>

					<li class="#">
						<a href="" target="_self">
							<span class="menu-left"></span>
							<span class="menu-mid">Help</span>
							<span class="menu-right"></span>
						</a>
	            	   	<div class="sub">
			   				<ul>
         			   					<li>
									<a href="help.php" target="_self">Help</a>
								</li>
         			   					<li>
									<a href="about.php" target="_self">About</a>
								</li>
			   				</ul>
					</li>

			   	</ul>
			</div>
			<div class="nav-right"></div>
		<br><br>
	 </div>
	</div>
</div>

MENU.CSS

.wrapper1{
    float: right;
	color: #44433f;	
	font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
    margin: 0px auto;
    margin-top: -50px;
    margin-left: 180px;
	padding: 0 30px 0;
	}
	.wrapper1 a{
		color: #FBE5E5;
		text-decoration: none;
	}
	.wrapper1 a:hover {
		color: #8DC940;
	}
	.wrapper1 p {
		margin: 0 0 17px;
		padding: 0;
		line-height: 18px;
	}
.wrapper {
	margin: 0px auto;
}
.nav {
	background: #fff url(images/nav_bg.png) repeat-x;
	float: left;
}
.nav-wrapper {
	clear: both;
	float: left;
}
.nav-left {
	background: url(images/nav_left.png) no-repeat top left;
	float: left;
	width: 11px;
	height: 41px;
}
.nav-right {
	background: url(images/nav_right.png) no-repeat top right;
	float: left;
	width: 11px;
	height: 41px;
}
.nav ul {
	height: 38px;
	float: left;
	margin: 0;
	padding-top: 3px;
	list-style: none;
	font-size: 15px;
}
.nav li {
	float: left;
	padding: 0 7px;
	background: url(images/split.png) no-repeat right center;
	position: relative;
    z-index:2;
}
.nav li.last {
	background:none;
}
.nav li:hover {
	z-index:3;
}
.nav li a {
	display: block;
	line-height: 38px;
	overflow: hidden;
	float: left;
}
a .menu-left {
	background: url(images/menu_left.gif) no-repeat left top;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-mid {
	background: url(images/menu_mid.gif) repeat-x top left;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
a .menu-right {
	background: url(images/menu_right.gif) no-repeat top left;
	width: 8px;
	height: 32px;
	line-height: 35px;
	display: block;
	float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
	background-position: 0 -37px;
	line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
	color: #388709;
}
.nav li:hover .sub,
.nav li.hover .sub {
	display:block;
}
.nav li .sub {
	display: none;
	position: absolute;
	top: 27px;
	left: 6px;
	background: url(images/submenu_top.png) no-repeat;
	width: 186px;
	padding-top: 9px;
}
.nav li ul {
	background: url(images/submenu_bg.png) repeat-y;
	width: 162px;
	height: auto;
	margin: 0;
	padding: 0 12px 10px;
	list-style: none;
	font-size: 14px;
}

.nav li:hover li,
.nav li.active li {
	width: 100%;
	padding: 1px 0 2px;
	border-bottom: 1px #E0F8D2 dashed;
	background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
	color: #388709;
	background: none !important;
	line-height: normal;
	width: 156px;
	padding: 8px 3px 3px;
	text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
	color: #fff;
	background: #8DC940 !important;
	text-decoration: none;
	line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
	color: #fff;
	background: #8DC940 !important;
	text-decoration: none;
	line-height: normal;
}
/**/
.nav .btm-bg {
	background: url(images/submenu_bottom.png) no-repeat;
	width: 205px;
	height: 9px;
	overflow: hidden;
	clear: both;
}
.content {
	width: 670px;
	background: transparent url(images/content_bg.png) repeat-y;
	float: left;
	padding: 10px 20px;
}
.content h1 {
	color: #333;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 18px;
	border-bottom: 1px dashed #FBE5E5;
}
.content h2 {
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	padding-left: 10px;
	margin-bottom: -5px;
}
.content p {
	padding: 0 15px;
	text-align: justify;	
}
.content-bottom {
	width: 710px;
	background: transparent url(images/content_bottom.png) no-repeat;
	height: 13px;
	float: left;
}

Mod-edit: Gelieve de volgende keer code binnen de daarvoor bestemde tags plaatsen

, [code] of [php] [/color]