menu drop down horizontal
Olá,
Preciso de orientação onde conseguir um menu drop-down horizontal que seja corretamente interpretado por diferentes navegadores (ie, mozilla e outros).
Já estou tentando arrumar um a muito tempo, porém o mais proximo que consegui foi um que funciona quase que bom com o ie, mas no firefox ele fica todo fora do lugar.
Outro problema que tive com outros scrips foi que ele não abria os links em um iframe da pagina, ou seja; o menu ficava fora do iframe mas o destino do link deveria ser no iframe, porém não funcionava.
Algum tempo atrás havia descoberto uma empresa que produzia menus personalizados, por um preço bastante acessivel, mas perdi o link. Caso alguém saiba quem faça esse tipo de trabalho por favor indique.
Abaixo está o script do menu que não funciona no firefox, caso alguem tenha alguma dica:
Obrigado!
Max Eller
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) lang="pt-br" xml:lang="pt-br">
<head>
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="language" content="pt-br" />
<meta name="ICBM" content="-22.975781,-43.193082" />
<meta name="DC.title" content="CSS para Web Design" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../estilo/estilo2.css" rel="stylesheet" type="text/css">
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems*.className == "menuparent") {*
* navItems**.onmouseover=function() { this.className += " over"; }*
* navItems**.onmouseout=function() { this.className = "menuparent"; }*}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
body {
font: 11px arial;
color:#0066cc;
font-weight:bold;
padding:5px;
margin:0px;
font-size:11px;
}
ul#primary-nav,
ul#primary-nav ul {
font: 11px arial;
color:#0066cc;
margin: 0;
padding: 0;
width: 140px; / Width of Menu Items /
background: #fff; / IE6 Bug /
font-size: 11px;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #0066cc;
padding: 5px;
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
}
/ Fix IE. Hide from IE Mac \/
** html ul#primary-nav li { float: left; height: 1%; }*
** html ul#primary-nav li a { height: 1%; }*
/ End /
ul#primary-nav ul {
position: absolute;
display: none;
left: 0px; / Set 1px less than menu width /
top: 25px;
}
ul#primary-nav li ul li a { padding: 2px 5px; } / Sub Menu Styles /
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } / Hide sub-menus initially /
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } / The magic /
ul#primary-nav li.menuparent { background: ; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #eeeeef; }
ul#primary-nav li a:hover { color: #E2144A; }
*</style>*
*</head>*
*<body>*
*<ul id="primary-nav">*
* <div align="center">*
* <table width="800" height="25" border="0">*
* <tr>*
* <td width="200" align="center" valign="middle"><h1> <li class="menuparent"><a href="#">PEDIDOS</a> *
* <ul>*
* <li><a href="lista_pedidos_abertos.php" target="tela_usuario">ABERTOS</a></li>*
* <li><a href="lista_pedidos_finalizados.php" target="tela_usuario">FINALIZADOS</a></li>*
* <li><a href="lista_pedidos_cancelados.php" target="tela_usuario">CANCELADOS</a></li>*
* </ul>*
* </li>*
* </h1> </td>*
* <td width="200" align="center" valign="middle"><h1> <li class="menuparent"><a href="#">CADASTRO</a> *
* <ul>*
* <li><a href="dados_cliente.php" target="tela_usuario">MOSTRAR</a></li>*
* <li><a href="atualiza_cadastro.php" target="tela_usuario">ATUALIZAR</a></li>*
* <li><a href="trocar_senha.php" target="tela_usuario">TROCAR SENHA</a></li>*
* </ul>*
* </li>*
* </h1> </td>*
* <td width="200" align="center" valign="middle"><h1> <li class="menuparent"><a href="#">CONTA</a> *
* <ul>*
* <li><a href="../conta/saldo_conta_cliente.php" target="tela_usuario">SALDO</a></li>*
* <li><a href="../conta/saque_conta_cliente.php" target="tela_usuario">RETIRADAS</a></li>*
* <li><a href="../conta/extrato_conta_mesatual_cliente.php" target="tela_usuario">EXTRATO MêS</a></li>*
* <li><a href="../conta/conta_meses_anteriores.php" target="tela_usuario">EXTRATO MESES ANT.</a></li>*
* </ul>*
* </li>*
* </h1> </td>*
* </tr>*
* </table>*
* </div>*
*</ul>*
*</body>*
*</html>*Discussão (1)
Carregando comentários...