Foros del Web » Creando para Internet » CSS »

Menu desplegable

Estas en el tema de Menu desplegable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/05/2011, 22:46
 
Fecha de Ingreso: mayo-2011
Mensajes: 15
Antigüedad: 6 años, 7 meses
Puntos: 0
Menu desplegable

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;}
  #2 (permalink)  
Antiguo 07/05/2011, 02:14
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: Menu desplegable

Aquí tienes varios MENÚS DESPLEGABLES 100% CSS.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·

Etiquetas: desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:56.