Problema com menu
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!
Discussão (1)
Carregando comentários...