Buenas noches tengo un problema con mi menu desplegable, resulta que al pasar por encima de uno de los menus me muestra el desplegable sin ningun problema, pero a parte de eso sin estar encima del menu me muestra el contenido del submenu desplegable y no se como ocultarlo, necesito ayuda es supremamente urgente solucionarlo.
Agradezco a la persona que me pueda ayudar a encontrar la solucion.
EL CODIGO HTML ES EL SIGUIENTE
<html>
<head>
<title>YB Clinica Odontologica</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body bgcolor="grey">
<div id="menu">
<ul>
<li class="first"><a href="#">Inicio</a></li>
<li class="top"><a href="#" >Agenda de Citas</a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li>
<li class="first"><a href="#">Historia Clinica</a></li>
<li class="first"><a href="#">Odontograma</a></li>
<li class="first"><a href="#">Estado de Cuenta</a></li>
<li class="first"><a href="#">Informes</a></li>
<li class="first"><a href="#">Administrar</a></li>
</ul>
</div>
</body>
</html>
EL CODIGO CSS ES EL SIGUIENTE
#menu{
float:left;
width:884px;
height:36px;
margin:0;
padding: 0 0 2px 0;
background:#000 no-repeat 0 0;
display:block;
}
/** barra de menu**/
#menu ul{
float:left;
margin:0;
padding:0 0 0 11px;
list-style:none;
position:absolute;
}
/* posicion letras del menu */
#menu li{
float:left;
width:auto;
font:14px Arial, Helvetica, sans-serif;
color:#000;
padding:15px 0 3px 5px;
float:left;}
line-height:47px;
}
#menu li:hover { position:relative;
}
#menu li.top { position:relative;
}
#menu li a{
color:#fff;
text-decoration:none;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
padding: 0 15px 6px 20px;
cursor:pointer;
}
#menu li a.top_link:hover {color:#000000;
}
#menu li a:hover{color:#003465; }
#menu li a.current{color:#003465;}
#menu li:hover ul ul,
#menu li:hover ul li:hover ul ul,
#menu li:hover ul li:hover ul li:hover ul ul,
#menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute;
left:-9999px;
top:-9999px;
}
/* Posicion caja submenu*/
#menu li:hover ul.sub
{left:25px;
top:39px;
background: #fff;
padding:1px;
border:1px solid #3a93d2;
white-space:normal;
width:80px;
height:auto;
}
/* Tamaño de la caja del submenu*/
#menu li:hover ul.sub li
{display:block;
height:19px;
position:relative;
float:left;
width:70px;
font-weight:normal;
padding:4px 0 0 0;
}
/*linea azul del submenu*/
#menu li:hover ul.sub li a
{display:block;
font-size:11px;
height:18px;
width:80px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
padding:0;
}
#menu li:hover ul.sub li a:hover
{background:#3a93d2;
color:#fff;}