Entrar

problemas en ie con menu desplegable

Kal-Eb · · Solicitar retirada
Estimados amigos de comocreartuweb como estan?? [;)] bueno tengo una consulta :P si alguien me puede ayudar porfa :P tengo un menu desplegable funciona de lujo en ff, chrome, etc. pero el lio es en Internet explorer :mad: lo q pasa es que en ie se mueve el menu a la derecha :/ bueno este es mi codigo

en html:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<div id="navegador">
		 			<div id="pageWrapper">
		 			<div class="header">
		 			<ul class="menu">
					<li><a href="#">página principal</a></li>
					<li><a href="#">link</a>			
					<ul>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					</ul>
					<li><a href="#">link</a>			
					<ul>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					</ul>
					<li><a href="#">link</a>			
					<ul>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					</ul>
					<li><a href="#">link</a>			
					<ul>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					</ul>
					</ul>
					</div>
					</div>
					<script type="text/javascript">
					$(document).ready(function() {
					$('ul li:has(ul)').hover(
      		function(e)
      		{
         	 $(this).find('ul').css({display: "block"});
      		 },
      		 function(e)
      		 {
         $(this).find('ul').css({display: "none"});
      	 }
   			 );
				 });
				 </script>
		 </div>
</body>

y el css es 
#navegador {float:left;width:900px;height:36px;;background-image:url(#);}

#pageWrapper {margin-left:30px;float:left;width: 843px;height:25px;}

.header {height: 25px;width: 843px;float:left;}

ul.menu {width:843px;float:left;margin-top:6px;
list-style-type:none;
}
.menu li {
line-height:18px;
font-size:13px;
position:relative;
float:left;
width:168px;
}
.menu li a {
color: #FDE19C;
text-transform:uppercase;
padding: 5px 20px;
text-decoration:none;
text-align:center;


}
.menu li a:hover {
background-color:ae4a79;
color: #ff9900;
}
.menu li ul {
display:none;
position:absolute;
top:20px;
width: 168px;
background-color: #993399;
padding:0px;
list-style-type:none;
}
.menu li ul li {
width: 167px;
border: 1px solid #993399;
border-top:none;
padding: 0px;
}
.menu li ul li:first-child {
border-top: 1px solid #993399;
}

.menu li ul li a {
width: 168px;
margin: 0px;
padding:0px;
}

.menu li ul li a:hover {
width: 168px;
margin: 0px;
color: #ff9900;

}

Porfa si alguien sabe como hacer para que funcione en ie se lo agradeceria [:D]