Menu Drop-Down + Sliding Door, não renderizando direito no IE

Abri esse tópico nessa seção por ser um problema referente a CSS e não a Wordpress.

Olá companheiros, estou criando um tema para o meu blog, e nesse tema eu gostaria de usar menus com dropdown, usando o estilo grafico do “Sliding Doors”.

Pesquisando na internet como fazer isso funcionar no wordpress, eu encontrei 2 tutoriais, sendo o primeiro um tutorial detalhado postado no Site do Maujor que usa javascript, e um tutorial também de dropdown do Tanfa, que não usa javascript, mas usa um arquivo HTC, especificado por uma classe behaviour no css.

Até o presente momento, o tutorial do Maujor parece funcionar perfeitamente no firefox, mas quando eu entrei no Internet Explorer do vista (acredito que seja o 8), conforme eu passo o mouse pelo menu, o fundo (que esta com sliding doors) parece ficar preso no :HOVER, mesmo quando eu mudo para o outro item do menu, o fundo do anterior continua aparecendo. Esse comportamento esta errado, já que o fundo só deveria aparecer quando eu passo o mouse por cima.

Fiquei um tanto contrariado com isso, não encontrando uma solução pratica, procurei uma maneira de criar um css apenas para o internet Explorer, e fazer de modo diferente.

Foi ai que encontrei um script, para que criando classes eu possa determinar qual navegador renderiza o que, o Css Browser Selector, deveria ter funcionado, mas rodando em minha maquina com o EasyPHP nada aconteceu.

Em suma, estou tentando resolver esse problema do meu menu, a única maneira que encontrei foi criando um css a parte para o Internet Explorer, mas nem com Comentários Condicionais e nem com o Css Browser Selector eu consigo isso. Talvez eu esteja fazendo algo errado, talvez nem precise criar um css a parte para o IE, eu realmente não sei onde estou errando.

Segue Abaixo meu CSS e código.

No Header.php

<div id="nav">
<ul><?php wp_page_menu('sort_column=menu_order&link_before=<span>&link_after</span>'); ?></ul>
</div>

No meu CSS

/ MENU PRINCIPAL /
/ Fix IE. Hide from IE Mac \/
* html ul li { float: left; height:1% }
* html ul li a { height: 1%; }
/ FIM /

#nav {
	background:url(imgs/bg_men.gif) left top no-repeat;
	width:800px;
	height:40px;
}

.menu ul {

	margin:0;
	padding:0;
	list-style:none;
	margin-left:15px;
}

.menu li:hover ul, li.over ul {

	display:block;
}

.menu ul li {

	/*margin: 10px 0 0 10px;
	padding-right:10px;*/
	padding:8px;
	float:left;
	position:relative;
	border-right: 1px solid #E4E4E4;
	height:22px;
}

.menu ul li a:hover {

	color:#fff;
	border: 0;
}

.menu ul a:hover span{

	background:url(imgs/bg_h-right2.gif) right top no-repeat;
}

.menu ul li:hover a {

	background:url(imgs/bg_h-left2.gif) left top no-repeat;
	color:#fff;
}

.menu ul li:hover span {

	background:url(imgs/bg_h-right2.gif) right top no-repeat;
}

.menu .current_page_item a {

 color: #E18701;
}

.ie .menu ul li a:hover {
/background:url(imgs/bg_h-left.gif) left top no-repeat;/

	background:#fff;
	color:#fff;
	border: 0;
}

.ie .menu ul a:hover span{
/background:url(imgs/bg_h-right.gif) right top no-repeat;/

	background:#fff;
}

.ie .menu ul li:hover a {
/background:url(imgs/bg_h-left.gif) left top no-repeat;/

	background:#fff;
	color:#fff;
}

.ie .menu ul li:hover span {
/background:url(imgs/bg_h-right.gif) right top no-repeat;/

	background:#fff;
}

.menu ul li:hover ul li span {

	background:none;
}

.menu ul li:hover ul li a {

	background:none;
	color:#999999;
}

.menu ul li a {

	margin: 0;
	color: #999999;
	display:block;
	padding-left:10px;
	font-family:Trebuchet MS,Arial,sans-serif;
	font-weight:bold;
	font-size:1.1em;
}

.menu ul a span{

	padding:4px 10px 4px 0;
	display:block;
}

.menu ul li ul{

	display:none;
	position:absolute;
	width:130px;
	top:29px;
	left:-7px;
	border-top: solid 5px #E77817;
	background:url(imgs/bg_drop.gif) left bottom no-repeat;
	padding: 0 0 10px 0;
	z-index:500;
}

.menu ul li ul li{

	float:none;
	position:relative;
	border:0;
	padding: 0 10px;
	margin: 2px 0;
}

.menu ul li ul li a{

	padding:0;
	font-size:11px;
}

.menu ul li ul li a span{

	border-bottom: 1px dotted #DFDFDD;
}

.menu ul li ul li a:hover span{

	background:none;
}

.menu ul li ul li a:hover{

	color: #E77817;
	background:none;
}

Renderização Correta: Firefox

/applications/core/interface/imageproxy/imageproxy.php?img=http://img33.imageshack.us/img33/4607/ex1ciu.jpg&key=2587e92cd568940e88e865e9f5fb1f97b0ecf14e8cfaa5e91b1d0947e0a5915a" alt="Imagem Postada" />

Renderização Incorreta: Internet Explorer

/applications/core/interface/imageproxy/imageproxy.php?img=http://img34.imageshack.us/img34/705/ex2n.jpg&key=47473a01117b45efe2581540271cd42c5fcdfc8ddd18078702cceea484f72907" alt="Imagem Postada" />