Salve a tutti, ho un problema abbastanza antipatico di interpretazione dei CSS da parte dei vari browser.
Mi spiego meglio:
Ho una navbar di Wordpress con il tema Arthemia.
L'ho personalizzata per cambiarne colori e conformazione.
L'unico problema è che su Safari (su mac) funziona bene, mentre su Firefox (Mac e Win) e su Chrome (Mac e Win) non funziona,non si vedono i colori.
Vi mostro gli screenshot e il codice:



Uploaded with ImageShack.us



Uploaded with ImageShack.us

é un menu a drop down che al passaggio del mouse sul pulsante diventa rosso.
Questo sistema su Safarei e IExplorer funziona regolarmente, su gli altri browser no.
Vi allego il codice CSS:


codice:
/* Navigation Bar*/
#navbar {
	margin:0 auto;
	margin-top:0px;
margin-bottom:2px;
	padding:0px 180px;
        font-family: Verdana;
	text-transform:uppercase;
	background:#20398c url(images/navbar.png);
	}

#page-bar {
	width:722px;
	}

#page-bar ul {
	list-style: none;
	}

#page-bar li {
	float:left;
	list-style:none;
	cursor: pointer;
	display:block;
	
	}

#page-bar li:hover {
	background:#red;
        
	}


#page-bar a, #page-bar a:visited {
	margin: 0px;
	padding:10px 16px;
	font-weight:bold;
	color:#FFF;
	display:block;
	}

#page-bar a:hover {
	text-decoration:none;
	display:block;
	}

#searchform {
	width:194px;
	text-align:right;
	padding-top:0px;
	margin-right:0px;
margin-left: 63px;
margin-bottom: 10px;
	}

/* Dropdown Menus */		
#page-bar li {
	float: left;
	margin: 0px;
	padding: 0px;
	}
	
#page-bar li li {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 122px;
	text-transform:capitalized;
	}
	
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
	background: #20398c;

filter: alpha(opacity=85);

opacity: 0.85;






	width: 122px;
	float: none;
	margin: 0px;
	padding: 5px 10px 5px 18px;
	border-top: 0px solid transparent;
	}
	
#page-bar li li a:hover, #page-bar li li a:active {
	background: #red;
	padding: 5px 10px 5px 18px;
	}

#page-bar li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	}

#page-bar li:hover ul {
	left: auto;
	display: block;
	}
	
#page-bar li:hover ul, #page-bar li.sfhover ul {
	left: auto;
	}
Secondo voi quale potrebbe essere il problema?
Cosa modificare?!

Grazie in anticipo!!