Ciao Ragazzi,
Sono alle prese con un menu dropdown che mi sta creando delle difficoltà: le voci sono su tre righe, tramite un tutorial ho utilizzato e adattato il css.
Link pagina di prova
Non tutto va come dovrebbe, vi chiedo due cose:

1) Su Chrome appare posizionato correttamente; imposto il position absolute e allineo l'elenco perfettamente. Su Firefox appare nettamente decentrato. Non è la prima volta che vedo differenze di rendering fastidiose tra i due browser. Ho provato ad usare sia em che pixel ma il risultato non cambia, come potrei risolvere?

2) Come posso fare per non far sparire la freccettina gialla una volta che punto l'elenco dei corsi col mouse?

Il codice html è abbastanza banale, si può vedere facilmente dalla pagina:
codice:
...
<li class="nav_corsi">			
  i corsi
	 <ul id="item_corsi">
		[*]
		  chitarra				
		
		[*]
		   batteria				
		
...
mentre il css che genera il dropdown è
codice:
ul#item_corsi {
	width: 60em;  	
	margin: 0; 
	padding: 0; 
	list-style:none;
	display: none; 
	float: left; 	
	position: absolute; 
	top: 98px;
   //left: -12.75em;
	left: -204px; 	
	z-index: 99999; 
	background-color: #bae1eb;
	}

#menu li:hover > ul{
	display: block;
}

ul#item_corsi li { 	
	float: left; 
	margin: 0; 
	padding: 0;    
	}	

ul#item_corsi li a {
	text-transform: uppercase;   
	//display: inline-block;
	text-align: center; 
	width: 10em; 
	padding: 1em 0; 
	color: #0a505c; 
	vertical-align: top; 
	font: normal 1.43753em/1 sketch_rockwell, serif;
	}

ul#item_corsi li a.on, ul#item_corsi li a:active {
	color: #fdf501; 	
	background-color: #0a505c; 
	}

.tall {
	padding: 0.5em 0;	
	}

#menu ul li:last-child a:hover{   
 	border-radius: 5px;
}

#menu ul li:first-child a:hover{   
 	border-top-right-radius: 5px;
 	border-top-left-radius: 5px; 
}