Menu doet het niet aktijd in IE11

Status
Niet open voor verdere reacties.

leoj

Gebruiker
Lid geworden
16 jan 2008
Berichten
67
Beste Forumleden, ik heb in mijn site een CSS drop-down menu geplaatst ipv een javascript menu. In Firefox doet deze het perfect, maar in IE11 doen de keuzemenu's het de ene keer wel en de andere keer niet. Ook een menukeuze die het niet doen, kan deze het ineens gaan doen als je er maar lang genoeg met je muis overheen gaat. Ik heb al behoorlijk zitten spelen met z index, maar helaas heeft dat niets geholpen. Als je misschien even op op www.familie-jordaan.nl zou willen kijken ben ik je dankbaar. Alvast bedankt voor de moeite.
 
Dit ligt niet aan IE 11. Er is behoorlijk wat verbetert sinds de slechte IE 9. Het zit 'm in de ruimte tussen level 1 en level 2 in het menu. De css van het menu is dus niet optimaal. In het algemeen:

box-sizing:border-box op alle items in het menu werkt handig
display:block op a
gebruik height en margin alleen als je weet wat je doet
gebruik waar mogelijk padding ipv margin

aanvulling
Code:
/* normalize */
.drop_menu, .drop_menu ul, .drop_menu li, .drop_menu a {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.drop_menu, .drop_menu ul {
	list-style: none;
}
.drop_menu a, .drop_menu a:hover, .drop_menu a:focus, .drop_menu a:active {
	text-decoration: none;
	outline: 0;
	cursor: default;
}

/* alle levels */
.drop_menu {
	float: left;
	width: 100%;
	position: relative;
	z-index: 597;
	background: #055;
}
.drop_menu li {
	float: left;
	vertical-align: middle;
}
.drop_menu li:hover {
	position: relative;
	z-index: 599;
	background: #055;
}
.drop_menu a {
	display: block;
	padding: 6px 15px 5px 15px;
	font: normal 13px Arial, Verdana, Helvetica, sans-serif;
	line-height: 1.3;
	white-space: nowrap;
	color: #fff;
}

/* alleen sub level */
.drop_menu ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	width: atuo;
}
.drop_menu ul li {
	float: none;
	background: #5FD367;
}
.drop_menu ul a {
	min-width: 100px;
	padding: 3px 15px 2px 15px;
	color: #fff
}
.drop_menu li:hover > ul {
	visibility: visible;
}

/* effects */
.drop_menu li:hover, .drop_menu li:focus, .drop_menu li:active {
	background: #5FD367;
}
.drop_menu ul li:hover, .drop_menu ul li:focus, .drop_menu ul li:active {
	background: #055;
}
.drop_menu ul {
	box-shadow: 2px 3px 6px #bbb;
}
/* volgende weghalen als je het lijntje niet wilt bij mouse-over */
.drop_menu > li:hover > a {
	border-bottom: 1px solid #055;
}
Suc6. Have fun.
 
Laatst bewerkt:
Beste Bron, bedankt dat je even hebt willen kijken. Het menu heb ik ergens vandaan gehaald onder het mom beter goed gepikt dan slecht gemaakt :(.
De rest heb ik zelf in elkaar gebakken, had het beter met het menu ook kunnen doen. :)
Ga het morgenochtend direct bekijken en testen.
 
Beste Bron, nogmaals bedankt, menu doet nu precies wat ik wil
 
Graag gedaan. Suc6 met de website.

Aanvulling:
Haal Verdana weg uit Arial, Verdana, Helvetica, sans-serif;
Een best goed cross-browser alternatief is
font: normal 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan