Archief - Dropdown menu in IE7

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

speedycompany

Legacy Member
Hoi!
Mijn dropdown menu werkt perfect in IE8 en FF 3 ed, maar wanneer ik mijn site open in IE7 en verklein (zodat het menu op 2 regels komt te staan), komt mijn SUBmenu onder het hoofdmenu te staan!
Voorbeeld image: Image-url
Hoe kan dit?


Dit is mijn CSS-code
Code:
body{
	background-image:url(IMG/achtergrond.png);
	margin:0;
	padding:0;
	behavior:url("csshover2.htc");
}
#container{
	position:absolute;
	left:20%;
	right:20%;
	min-width:550px;
	margin:0;
	padding:0;

}
#containertekst{
	background-color:#94e1f2;
	margin:0;
	padding:0;
}
#tekst{
	position:relative;
	left:2%;
	font-family:Verdana, Geneva, sans-serif;
	font-size:0.9em;
}
.img{
	width:100%;
	margin:0;
	padding:0;
	
}
#fixmenu{
	background-color:#94e1f2;
	width:100%;
}


.menu {width:92.5%; height:30px; position:relative; left:4%;z-index:100;border-left:1px; border-right:1px; font-family:Verdana, Geneva, sans-serif;}
.menu ul {padding:0;margin:0;list-style-type:none;z-index:200;/*Z-index om boven eigen menu uit te komen*/}
.menu ul ul {width:auto;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:auto;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:0.9em;text-decoration:none; color:#000; width:auto; height:30px; border:1px solid #000; border-width:1px 1px 1px 1px; background:#e9e9f9; padding-left:10px; padding-right:10px; line-height:29px;} /* line-height om tekst te centreren */
 
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#e9e9f9 no-repeat 130px center;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#e9e9f9 no-repeat 130px center;}
.menu ul ul :hover > a.drop {background:#e9e9f9 no-repeat 130px center;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e9e9f9;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}
 
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:auto;border-top:1px solid #000;}
 
/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}
 
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}
 
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
 
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#e9e9f9; color:#000; height:auto; line-height:1em; padding:5px 10px; width:150px;border-width:0 1px 1px 1px;}
 
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#65c4fb;text-decoration:underline;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#65c4fb;}
 
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}

Hopelijk weet iemand hier raad mee...

MennovdH

Legacy Member
Hoi,

Ik denk dat het probleem het volgende is: z-indexes worden enkel geëvalueerd binnen de huidige offsetparent. Van daaruit wordt de z-index van de offsetparent weer gebruikt.
Je verschillende toplevel li's hebben impliciet oplopende z-indexes, waardoor het submenu van een voorgaand hoofditem onder de hoofditems erna komt. Een oplossing is waarschijnlijk je hoofdmenu-items manueel aflopende z-indexes geven: <li style="z-index: 7">Home</li>, Geschiedenis 6, Computervirus 5, enz.
Ik vermoed dat dat wel zal werken.

Menno

speedycompany

Legacy Member
Ok, zal het even proberen! Fel bedankt voor de snelle reactie!

// EDIT //

Wow, héél fel bedankt, het werkt als nooit tevoren!
Tnx!
(Er mag een slotje op deze post btw)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan