Drop down menu komt onder slider

[lerrie]

Bij een drop down menu op een website welke ik aan het bouwen ben valt het menu weg onder de slider, zie hier http://tinyurl.com/9t4fltq Hij zou het moeten doen zoals hier http://tinyurl.com/8kxw5em waar het menu netje over de afbeelding heen valt.

Ik heb al geprobeerd om het menu / de ul / de li postion:absolute te maken maar zonder effect. Voor het menu gebruik ik de volgende css.

#menu ul{
	margin:0;
	list-style:none;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
	#menu ul li{
	display:block;
	position:relative;
	float:left;
	font-family: "Conv_GILC____";
	font-size: 22px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFF;
}
	#menu li ul{
	display:none;
}
	#menu ul li a{
	display:block;
	margin-left:1px;
	text-decoration:none;
	color:#ffffff;
	white-space:nowrap;
	padding-top: 5px;
	padding-right: 7px;
	padding-bottom: 5px;
	padding-left: 7px;
}
	#menu ul li a:hover{
	color:#a3122e
}
	#menu li:hover ul{
	display:block;
	position: absolute;
}
	#menu li:hover li{
	font-size:85%;
	clear:left;
	width:150px
}
	#menu li:hover a{
	color:inherit;
	background-color: #000;
}
	#menu li:hover li a:hover{
	color:#a3122e

 

[csshunter]

Hoi lerrie,
Het zit 'm op een of andere manier in de stapel-volgorde. Kijk:

#nav {
    ...
    position: relative;
    z-index: 1;
    }

De z-index geeft de stapel-volgorde aan, met voorbijgaan aan elementen die later in de html-code staan (en dus standaard erboven komen te liggen).

• Dat kan ook met floats en absolute posities te maken hebben, want de stapel-volgorde is pittig ingewikkeld (zie de uitleg in de css-specificatie).
• Mijn trial & error (even wild-westen met Firebug!) gaat altijd sneller dan het doorgronden wat hier precies staat.

In dit geval helpt het al om de #nav (waar alles van het menu in zit) een tandje omhoog te zetten. Alle afstammelingen van de #nav (kinderen, kleinkinderen, enz. enz.) komen dan ook een etage hoger te liggen dan hun natuurlijke plek.
De {position: relative;} staat erbij omdat de z-index niet werkt zonder opgegeven position-waarde (zie hier).

Met vriendelijke groet,
CSShunter

{edit}
Zie ik daar een schuine streep?
- Als je de vaste hoogte van de #content er uit haalt, rekt en krimpt deze met z'n inhoud (en de lettergrootte-instelling van de bezoeker).
{/edit}

 

[lerrie]

Klopt als een bus. Hij werkt! Ik heb de streep nog niet veranderd, dat is het volgende waar ik mee bezig ga. Wat bedoel je precies met de lettergrootte-instelling van de bezoeker?

 

[csshunter]

Hoi lerrie,
Wat ik bedoelde was dit:

Zag opeens ook een thikfoutje.

Met vriendelijke groet,
CSShunter