Problema z-index

[simone92_3d]

Ciao a tutti. innanzitutto mi presento perchè sono nuovo del forum.. Sono Simone e ho 19 anni e faccio la classe 5^ di un'ITIS ovviamente indirizzo Informatica..
Veniamo al dunque. ho creato un menù in css e per riuscire a capire bene come posizionare gli elementi ci ho passato alcune ore (è la mia prima esperienza con il CSS). sono arrivato alla fine ma ho del problemi con la funzione z-index. in pratica non riesco a farlo funzionare.. vi posto la parte del codice del menù e il file css allegando un immagine per farvi capire che cosa vorrei ottenere..


Codice Html:

<div id='menu'>
	<ul class='lv'>
		<li class='lv'>Pc
				<ul class='sub'>
					<li class='sub'>Registrazione Pc
				[/list]
		
		<li class='lv'>d
				<ul class='sub'>
					<li class='sub'>1
					<li class='sub'>2
				[/list]
		
	[/list]
</div>

E questo è il codice CSS:

#menu{
padding: 0;
border: none;
}


#menu ul.lv{

position: 			relative;
display: 			block;
margin: 			0;
background-color:	#778899;
border:             	3px solid black;
border-top:      	none;  
width: auto;
height: 15px;;
-webkit-border-radius: 0 0 25px 25px; /* smussamento angoli per Safari e Chrome*/
-moz-border-radius:    0 0 25px 25px; /* smussamento angoli per Firefox */

}


#menu ul li.lv{
position:			relative;
display: 			block;

top: 				100%;
float: 			left;

list-style: 		none;
margin-right: 		6px;
padding-bottom:		8px;

border:             	3px solid black;
border-top:      	none; 

width: 			90px;
height: 			20px;


text-decoration:		none;
text-align: 		center;

background-color:	white;

-webkit-border-radius: 0 0 25px 25px; /* smussamento angoli per Safari e Chrome*/
-moz-border-radius:    0 0 25px 25px; /* smussamento angoli per Firefox */


}

#menu ul li:hover.lv{
position:			relative;

border:             	4px solid red;
border-bottom-color:   red;  

height: 25px;

background-color: 	green;

-webkit-border-radius: 25px 25px 0 0; /* smussamento angoli per Safari e Chrome*/
-moz-border-radius:    25px 25px 0 0; /* smussamento angoli per Firefox */
z-index: 2;
}

/*stile generale dei list item*/


/*style generale dei link*/
#menu a{
		
		
		text-decoration:none;
		text-align: center;
		line-height: 30px;	
		font-family: Verdana;
		font-size: 9px;
		font-weight: bold;
}

 /* stile sottomenù*/
#menu ul li ul.sub{

visibility: 		hidden;

position: 			relative;
left: 			-4px;
top: 				-10px;
border:             	4px solid black;

background-color: 	red;
display: 			block;


min-width: 		100px;
min-height: 		10px;
height: 			auto;

text-align: 		center;
}

#menu ul li:hover ul.sub{
visibility:		visible;

-webkit-border-radius: 0 25px 25px 25px; /* smussamento angoli per Safari e Chrome*/
-moz-border-radius:    25px 25px 0 0; /* smussamento angoli per Firefox */

}
#menu ul li ul li.sub{
left: -30px;
position: relative;
display: block;
list-style: none;
}

In pratica voglio l'UL' secondario sopra l' 'IL' principale 'hover' ho provato in tutti i modi ma non ci riesco..

Img Menù

[bukz]

Non ho capito bene cosa intendi ma se vuoi far posizionare il UL secondario sopra il principale hover (quindi gli sta sotto) puoi provare mettendso un margin negativo quanto l'altezza da coprire e z-index superiore.

Quindi prova ad aggiungere al css di UL secondario:

margin-top:-20px;
z-index:10;

Spero ti sia di aiuto

[simone92_3d]

innanzitutto grazie della risposta.. comunque se guardi bene l'immagine l'ul secondario sta di un livello sopra l' il principale.. in poche parole vedi il principale che ha il bordo rosso? resta sempre sotto l'ul secondario..