Ciao a tutti, sto provando a rifare il mio sito personale utilizzando css3 e html5...mi si è presentato un problema.
www.morialberto.it/prova2/ qui potete vedere la bozza...come potete vedere il menu sulla destra è sotto il content, io vorrei che la voce selezionata vada allo stesso livello del content...ho provato a modificare gli z-index ma nulla.

Il codice css è questo:
codice:
nav ul li{ 
	display: block;
	background-image: url("../img/menu-item.jpg");
	background-repeat: repeat;
	width: 125px;
	height: 35px;
	font-size: 16px;
	-moz-border-radius: 0 7px 7px 0; 
	-webkit-border-radius: 0 7px 7px 0;
	border-radius: 0 7px 7px 0;
	-moz-box-shadow: 2px 2px 4px Black;
	-webkit-box-shadow: 2px 2px 4px Black;
	box-shadow: 2px 2px 4px Black;
	border-bottom: 1px solid Black;
	z-index: 0;
}

nav ul .selected{
	background-image: url("../img/selected1.jpg");
	background-repeat: repeat-y;
	width: 140px;
	height: 45px;
	font-size: 18px;
	font-weight: bold;
	-moz-text-shadow: 2px 2px 4px Black;
	-webkit-text-shadow: 2px 2px 4px Black;
	text-shadow: 2px 2px 4px Black; 
	-moz-box-shadow: 4px 2px 8px Black;
	-webkit-box-shadow: 4px 2px 8px Black;
	box-shadow: 4px 2px 8px Black;
	border-bottom: 1px solid Black;
	border-left: 0px;
	z-index: 1;
}
Il content ha z-index: 1. Per quanto riguarda la classe selected è la classe che assegno con jquery all'elemento del menu che vado a cliccare.
Qualcuno sa come si può risolvere con i css? oppure è una questione di javascript?
(ps il sito non si vede su IE...non ho ancora avuto tempo di testarlo e modificare il css per explorer..)

Grazie a tutti!