Tengo un menu horizontal, con submenus verticales, en IE se ve bien, pero en Firefox , la primera opcion de los submenus se me sube al horizontal.
he intentado de todo y ya no se que hacer.
Les agradezco de antemano sus opiniones.
aqui pongo el HTML:
<html>
<head>
<link rel="stylesheet" title="estilo" type="text/css"
href="estilom.css" >
</head>
<body bgcolor="white" onclick="iniciar()">
<?php
include("scriptm.php");
?>
<div id="menu">
<ul id="principal">
<li><a id="recepcion" href="#menuh" onmouseover="mostrar('op1')">Recepción</a></li>
<ul id="op1" onclick="ocultar('op1')">
<li><a href="#menuh">Empresas</a></li>
<li><a href="#menuh">Tramites</a></li>
</ul>
<li><a id="inspeccion" href="#menuh" onmouseover="iniciar()">Inspección</a></li>
<li><a id="analisis" href="#menuh" onmouseover="iniciar()">Análisis</a></li>
<li><a id="Informes" href="#menuh" onmouseover="mostrar('op2')">Informes</a></li>
<ul id="op2" onclick="ocultar('op2')">
<li><a href="#menuh" >Resoluciones</a></li>
<li><a href="#menuh">Estadisticas</a></li>
</ul>
<li><a id="Configuracion" href="#menuh" onmouseover="mostrar('op3')">Configuración</a></li>
<ul id="op3" onclick="ocultar('op3')">
<li><a href="#menuh">Persona</a></li>
<li><a href="#menuh">Documentos</a></li>
<li><a href="#menuh">Tramite</a></li>
<li><a href="#menuh">Cuentas</a></li>
<li><a href="#menuh">Tipo Balance</a></li>
<li><a href="#menuh">Motivo Tramite</a></li>
<li><a href="#menuh">Licencia</a></li>
<li><a href="#menuh">Zona</a></li>
<li><a href="#menuh">Tipo Comercio</a></li>
<li><a href="#menuh">Periodo</a></li>
<li><a href="#menuh">Giro</a></li>
<li><a href="#menuh">Glovales</a></li>
<li><a href="#menuh">Usuarios</a></li>
<li><a href="#menuh">Roles</a></li>
</ul>
<li><a href="#menuh" onmouseover="iniciar()">Ayuda</a></li>
<li><a href="#menuh" onmouseover="iniciar()">Salir</a></li>
</ul>
</div>
</body>
</html>
Este es el css:
ul{
list-style-type: none;
}
a{
color:black;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 4px;
border-left-width:8px;
border-style: solid;
border-color: gray;
background:white;
padding:0px 10px 0px 10px;
width: 140px;
height:5px;
}
a:hover{
color:brown;
background:silver;
}
/* propiedades de los id */
#principal{
list-style-type: none;
margin:0px;
padding:0px;
}
#principal li{
float:left;
}
#op1,#op2,#op3{
margin:0px;
padding:0px;
display:none;
float:left;
}
#op1 li,#op2 li,#op3 li{
float:none;
}
y este es el script
<html>
<head>
</head>
<body>
<script>
function iniciar() {
document.getElementById('op1').style.display = "none";
document.getElementById('op2').style.display = "none";
document.getElementById('op3').style.display = "none";
}
function mostrar(op) {
iniciar();
document.getElementById(op).style.display = "block";
}
function ocultar(op) {
document.getElementById(op).style.display = "none";
}
</script>
</body>
</html>