Ciao a tutti.

ho un problema di incompatibilità su internet explorer.

questa pagina panathlonmondovi.it contiene questo menu:

codice:
    <div id="menu">
       
        <div id="voci-menu">
        	<ul>
            	<li class="storia">
                <li class="soci">
                <li class="attivita">
	            <li class="etica">
                <li class="convenzioni">           [/list]
        </div> 
        
    </div>
so che non è corretto inserire un elemento dell'elenco all'interno di un tag <a> ma questo meriterebbe un post a parte.

css:
codice:
	div#voci-menu ul a {
		margin:0;
		padding:0;
		}
	
	div#voci-menu ul a li {
		list-style:none;
		display:inline-block;
		width:128px;
		height:70px;
		
		
		font-variant:small-caps;
		color:white;
		font-weight:bold;
		font-size:17px;
		border-radius: 8px;
 		-moz-border-radius: 8px; /* firefox */
 		-webkit-border-radius: 8px; /* safari, chrome */	

	}
	/*
	div#voci-menu ul li a {
		text-decoration:none;
		color:white;
	}*/
	
	div#voci-menu ul a li.convenzioni:hover,div#voci-menu ul a li.storia:hover, div#voci-menu ul a li.soci:hover, div#voci-menu ul a li.attivita:hover, div#voci-menu ul a li.etica:hover {
		border-top:3px solid white;
		border-bottom:3px solid white;
		height:64px;
		
		cursor:pointer;
	}

/*in più ogni li del menu ha un'immagine di sfondo.*/


perchè con internet explorer il menu resta in verticale?
perchè non viene visualizzato il puntatore del mouse "pointer" sulle voci del menu?
e soprattutto... perchè il plug-in di jquery colorbox, che apre diversi link della pagina, non funziona bene? eppure è assicurata la massima compatibilità con Internet Explorer 6, 7, 8, 9.