Beste,

Ik heb een dropdown menu gemaakt d.m.v CSS en wat Jquery. Zie hier voor het resultaat:
http://www.kwalit.nl/menu/

Nu heb ik het bovenstaande menu een z-index: 9999; gegeven, maar de schaduw van de dropdown box komt nog steeds boven het menu uit (dus de dropdown box staat hoger dan het menu).

Het werkt wel als ik de dropdown box een z-index: -9999; geef, maar dat wil ik juist niet hebben. Ik wil dat het menu dus hoger komt te staan dan alle andere DIVS.

Wat doe ik fout? Zie broncode voor CSS

Met vriendelijke groet,

Jason Koolman

Edit

Het menu moet tenminste 1 z-index waarde hoger hebben als de dropbox

Klopt, maar dat werkt dus niet. Ik heb geprobeerd het menu een z-index van 9999 te geven. Het werkt alleen als ik de dropdown box een z-index van -1 of minder geef. Maar dat wil ik niet, want dan komt de dropdown onder al mijn andere DIVS te staan.

Code:

#menu {
	width: 100%;
	height: 60px;
	position: absolute;
	top: 0px;
	background: #000;
	z-index: 9999;
}

Code:

#menu {
	width: 100%;
	height: 60px;
	position: absolute;
	top: 0px;
	background: #000;
	z-index: 1;

}

.dropdown-menu {
	width: 215px;
	height: auto;
	position: absolute;
	list-style: none outside none;
	background-color: #9B0000;
	-moz-border-radius: 0px;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-radius: 0px;
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	border-radius: 0px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	-moz-box-shadow: 0px 0px 16px 0px #555;
  	-webkit-box-shadow: 0px 0px 16px 0px #555;
  	box-shadow: 0px 0px 16px 0px #555;
	display: none;
	top: 60px;
	z-index: -1;
}

Origineel gepost door Jeesie

Klopt, maar dat werkt dus niet. Ik heb geprobeerd het menu een z-index van 9999 te geven. Het werkt alleen als ik de dropdown box een z-index van -1 of minder geef. Maar dat wil ik niet, want dan komt de dropdown onder al mijn andere content te staan.

Code:

#menu {
	width: 100%;
	height: 60px;
	position: absolute;
	top: 0px;
	background: #000;
	z-index: 9999;
}

Zie: http://www.nudiensten.nl/opdr/1212_001/

Helemaal top! Ik snap het.

Met vriendelijke groet,

Jason Koolman