Problema com menu

[joacatito 0]

Salve, salve!

 

Adaptando um menu do Micox (Horizontal/Horizontal), me deparei com um problemão.

 

No IE ele funfa beleza, mas no FF não...

 

Pelo q vi em outros posts, pode ser por causa do "display:table;". Tentei algumas coisas, mas não consegui resolver. Alguém consegue me dar uma mão?

 

CSS:

 

body { margin:0 auto; font-size:10px; font-family: Verdana, Arial;}	/*************************************************************************************/	/* Menu Horizontal */	/* Créditos: Micox */	.menu_principal { 		display: table;	}	.menu_principal * { 		margin: 0; 		padding: 0; 		color:#FFFFFF;	}		.menu_principal a { 		display: block; 	}	.menu_principal li { 		list-style: none; 		float: left; 		height: 1%; 	}	.menu_principal li ul { 		position: absolute; 		visibility: hidden; 		white-space: nowrap;	}		.menu_raiz {		width:120px;		margin-top:6px;	}		.menu_raiz_menor {		width:80px;		margin-top:6px;	}						.menu_raiz_maior {		width:190px;		margin-top:6px;	}	.menu_raiz a:hover, .menu_raiz_menor a:hover, .menu_raiz_maior  a:hover{		border-bottom:6px solid navy;	}		.menu_raiz_filho{		width:150px;		background-color: #000000;																		clear:both;	}	.menu_raiz_filho a:hover, .menu_raiz_filho a:over{		border: 0;	}	/* hack para navegadores que exigem width para elementos pos absolute (Opera)*/	html:first-child body .menu_principal li ul { 		width: 500px; 	}	.menu_principal li:hover ul, .menu_principal  li.over ul { 		visibility: visible;	} 	/*a class  .over eh tecnica pro hover no IE*/	.menu_principal li:hover ul li ul, .menu_principal li.over ul li ul{ 		visibility: hidden;	}	.menu_principal li ul li:hover ul, .menu_principal li ul li.over ul{ 		visibility: visible;	}	/* visual*/	.menu_principal { 		width: 908px; 		background: #000000 url(../../media/menu_fundo.jpg) no-repeat fixed;		height: 45px;	}	.menu_principal a { 		font-weight: bold; 		text-decoration: none; 		padding: 0 10px; 		height: 21px;		vertical-align:middle;	}	.menu_principal a:hover { 		text-decoration: underline; 		color: #FFFFFF;	}	.menu_principal ul li ul {	/********* Sub-Categorias ***********/		background-color: #000000; 		border: 1px solid #000000;	}		/*************************************************************************************/

HTML:

 

<div class="menu_principal" style="width:908px; height:45px; position:absolute; margin:0 0 0 0; z-index:10000;">	<ul xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:vb="http://msgxml.com/vb" xmlns="">		<li class="menu_raiz_menor">			<a href="default.asp">				HOME			</a>		</li>		<li class="menu_raiz">			<a>				INSTITUCIONAL			</a>		</li>		<ul>			<li class="menu_raiz_filho">				<a href="default.asp?id=11&mnu=11">					Institucional				</a>			</li>			<li class="menu_raiz_filho">				<a href="default.asp?id=12&mnu=12">					Grupo Steinbruch				</a>			</li>		</ul>		<li class="menu_raiz_maior">			<a>				RESULTADOS FINANCEIROS			</a>		</li>		<li class="menu_raiz_menor">			<a>				ATUAÇÃO			</a>		</li>		<li class="menu_raiz_menor">			<a>				ASSET			</a>		</li>		<li class="menu_raiz_maior">			<a>				LEITURA ECONÔMICA			</a>		</li>		<li class="menu_raiz">			<a>				PONTO DE VISTA			</a>		</li>	</ul></div>

Alguém consegue me dar uma mão?

 

Vlw!

[joacatito 0]

O problema não era o display...

 

IE é sempre IE :D

Ele aceitava o submenu dessa forma:

 

<ul><li></li><li></li><li></li>  <ul>   <li></li>   <li></li>   <li></li>  </ul><li></li></ul>

Quando o correto, por exemplo, seria:

 

<ul><li></li><li></li><li>  <ul>   <li></li>   <li></li>   <li></li>  </ul></li><li></li></ul>

O FF não aceita gambiarra.

 

Vlw pela força http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif