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

[Thiago.Carneiro 0]

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

 

Renderização Incorreta: Internet Explorer

[William Bruno 1501]

Poste o HTML gerado pelo menu.

[Thiago.Carneiro 0]

seria algo como

<div class="menu">
 <ul>
  <li class="page_item page-item-22 current_page_item">
   <a title="História" href="http://localhost/wp_acordosabor">
	<span>História</span>
  </a>
  </li>
  <li class="page_item page-item-24">
	<a title="Nossos Pratos" href="http://localhost/wp_acordosabor/?page_id=24">
	 <span>Nossos Pratos</span>
   </a>
	<ul> ////SUB - MENU
	  <li class="page_item page-item-46">
	   <a title="Cardápio" href="http://localhost/wp_acordosabor/?page_id=46">
		<span>Cardápio</span>
	   </a>
	  </li>
	</ul>
  </li>
</ul>