menu despegable con jquery

caffesinho · #1 (**permalink**) 22/04/2012, 20:07

buenas noches a todos, soy nuevo usando jquery y buscando por la web encontre como usar jquery para menu despegable lo unico que no me quedo es que en el div en donde estan las listas el internet explorer lo expande. ¿Como lo puedo solucionar?

de antemano gracias por la ayuda

Código HTML:

<html>
<head>
<title>Bienvenido</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('#menu li').hover(function()
{
$(this).find('.submenu').fadeIn(400);
},function()
{
$(this).find('.submenu').fadeOut(100);
});
});
</script>
</head>
<body>


<div id="master">


<div id="cabecera">

</div>


<div id="men">

<ul id="menu">


<li><a href="#">Contactanos</a></li>


<li><a href="#">Convenios</a></li>


<li><a href="#">Quienes somos</a>

<ul class="submenu">


<li><a href="#">Misi&oacute;n</a></li>
<li><a href="#">Visi&oacute;n</a></li>
<li><a href="#">Objetivos</a></li>


</ul>
</li>


<li><a href="#">Inicio</a></li>


</ul>

</div>

<div id="cuerpo">

</div>






</div>


</body>
</html>

Código:

#cabecera
{
	width:auto; 
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	background:#000;
}
#master
{
	background:#FFF;
	height: auto;
	width: auto;
	margin-bottom: 3%;
	margin-right: 4%;
	margin-top: 3%;
	margin-left:4%;
	border:groove;
	border-color: #8A0808;
	-moz-border-radius: 2px 2px 2px;
}

#men{
        background: #d22929;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height:6%;
	position: fixed;
}

/*inicio del menu*/

li{
list-style:none;
}

a{
text-decoration: none;
color:white;
}

#menu{

float: right;
}

#menu li{
float: right;
font-size: 1em;
padding: 0px;
width: 120px;
}

#menu li a{
color:white;
float: right;
padding:0px;
width: 120px;
}


#menu .submenu{
display: none;
padding:0px;
float: left;
font-size: .9em;
width: 50px;
position: relative;
}

#menu .submenu li{
float: left;
widhtn: 100px;
}

#menu .submenu li a{
float:left;
background: green;
color: #000;
width: 100px;
}
/*Fin del menu*/
#cuerpo
{
	padding: 15px 15px 15px 0px;
	margin:15px 15px 15px 0px;	
	
}