Saludos, tengo un codigo de una lista desplegable con un submenu solo, se muestran bien en la mayoria de navegadores, solo da problemas en internet explorer que hace un descuadre del sub menu corrido hacia la derecha y el ultimo menu me lo pone abajo del primer menu. tengo internet explorer 7 .
bueno aqui les dejo el codigo pues he buscado ayuda en internet y nada, ojala me ayuden, gracias.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>MENUS </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/menu.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" >
</head>
<body>
<BODY BGCOLOR="#000080">
<SPAN style="position: absolute; top: 12px; left: 25px; width: 120px; height: 49px"><img src="lovemoon.png" width="228" height="50" />
</SPAN>
<SPAN style="position: absolute; top: 16px; left: 279px; width: 539px; height: 95px"><img src="luna romantica.jpg" width="700" height="91" /></SPAN>
<p><SPAN STYLE="position:absolute; top:22px; left:723px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 62px; color: #FFF;" >
Hola
<?php
echo $_COOKIE['usuario1'];
?>
</SPAN>
<SPAN STYLE="position:absolute; top:75px; left:20px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 242px; color: #FF00FF; font-size: 12px; font-style: italic;" >
Si Amas algo déjalo libre, si regresa es porque es tuyo, sino...nunca lo fue.
</SPAN>
<SPAN STYLE="position:absolute; top:640px; left:955px; color: #FFF;" >
<a href="salir.html"><img src="salir.png" alt="" width="36" height="20" /></a>
</SPAN>
<SPAN STYLE="position:absolute; top:640px; left:910px; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; width: 55px; color: #FF8C00;" >
salir
</SPAN>
<!--
AQUI LA LISTA DESPLEGABLE
-->
<ul id="menu">
</p>
<li><a class="back" href="menus.php">Inicio</a></li>
<li><a class="back" href="menus.php">Mensajes</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url..."> En Linea</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Busqueda</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Coincidencias</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Visitantes</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url..."> Usuarios</a></li>
<li><a class="back" href="menus.php">Mi Perfil</a>
<ul>
<li><a href="editarperfil.php">Editar Perfil</a></li>
<li><a href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Subir Fotos</a></li>
</ul></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">Cuenta Gold</a>
<ul>
<li><a href="paginadeinicio.php">CENTER</a></li>
<li><a href="http://www.forosdelweb.com/f53/problema-descuadre-lista-desplegable-ie-941815/f53/poner-imagen-fondo-menu-desplegable-925317/url...">FONT</a></li>
</ul></li>
</div>
<style type = "text/css">
.back{
background-image:url('');
background-repeat:no-repeat;
background-color:#99cccc;}
#menu{padding-left:0px; margin-top:120px; }
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:100px;height:20px; background-color:#FF0000;border:1px solid; padding:2px;text-decoration:none;
text-align:center; color:#000;font-family:arial; font-size:15px;font-weight:bold;}
#menu li a:hover{background:navy;border-color:transparent;color:#00FF00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block;float:none; position:relative; padding:0px}
#menu li:hover ul{display:block; padding-left:0px;}
</style>
</body>
</html>