menú desplegable, se oculta

[cucuru]

hola, tengo un menú a la izquierda que se despliega hacia la derecha cuando tengo el ratón encima, hasta aquí todo bien, el problema es que a la derecha tengo un mapa de google maps, y el menú me queda debajo del mapa, con lo que no se ve.

¿hay alguna opción de decirle que la capa va por encima de todo lo demás?

No pongo el código porque supongo que es añadir una opción, si creeís que es necesario decidme y lo hago!

Saludos!

[Impostor]

Prueba añadiendo z-index:1; al menú. Debe funcionar.

Saludos¡¡

[cucuru]

Hola, pues no me funciona. Este es mi css, ¿donde debería ponerlo?

Código:

#general {
	overflow:hidden; 
	width:100%; 
	margin-left:3%;
}

#map {
	margin-left:260px;
	margin-top:40px;
	width: 825px;
	height: 500px;
 	border-color: #000;
	border-style: solid;
	
}

#menu {
	float:left;
	margin-top:25px;
	width: 240px;
	}

#menu li { /* Esto evita que salgan los iconos de lista */
	list-style:none;
}

	

#menu li a { /* Esto evita que los enlaces salgan subrayados */
  	text-decoration: none;
}


#menu ul li {
	position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
	width:200px;
}



#menu li a:link, #menu li a:visited{ /* Estilo del menú de primer nivel */
	color: #9E3C02;
	display: block;
	background: url(menu/menu.gif);
	padding: 8px 0 0 30px;
}

#menu li a:hover{ /* Estilo del menú de primer nivel al tener el ratón sobre un elemento */
	color: #fff;
	background: url(menu/menu.gif) 0 -32px;
	padding: 8px 0 0 30px;
}

#menu li a:active, #menu li.activo a{ /* Estilo del menú de primer nivel al estar pulsando con el ratón o estar seleccionado */
	color: #fff;
	background: url(menu/menu.gif) 0 -64px;
	padding: 8px 0 0 30px;
}

#menu li.falso { /* Sólo para que visualmente parezcan dos menús y se muevan a la vez */
	padding: 30px 0 0 30px;
}

#menu ul.segundoNivel{ /* Estilo del menú de segundo nivel */	
	position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
	left:200px; /* Para que no monte sobre el <li> */
   	top:0px;
	display:none;	
	padding: 0 0 0 0;
}

#menu ul li:hover > ul{ /* Al tener el ratón sobre algún nivel se abre el siguiente*/
	display:block;
}

#menu ul.tercerNivel{ /*Estilo del menú del tercer nivel */
	display: none;	
	position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
	left:200px; /* Para que no monte sobre el <li> */
   	top:0px;
	/*height: 100px;*/
	font : 55% sans-serif;
	padding: 0 0 0 0;
}

Perdón por el rollo, pero es que no tengo ni idea!

Gracias!

[Impostor]

Prueba añadiendoselo a #menu

Saludos¡¡

[cucuru]

Hola, gracias por tu interés, pero no funciona, sigue igual, el menú se despliega detrás del mapa y no veo nada.

¿Alguna otra posibilidad?

Gracias!

[cucuru]

Ya lo he conseguido! leyendo por ahí he visto que la propiedad z-index sólo funciona si position está establecido a relative o absolute, así que se lo añadí y perfecto!

Gracias!!! Saludos!

[amigo_uy]

z-index:99999 o lo mejor es modificar el codigo del mapa que debe ser en flash agregandole wmode="transparent"

[CarlosMuno]

Hey! aqui... yo buscaba el mismo problema y lo resolví así, solo es colocando lo que te dicen pero en esta etiqueta de "css":


#menu li:hover {
background:#DFDFDF;
/* AQUI SE ARREGLA MENU DESLGBL X/ENCIMA */
z-index: 1 !important;
display: block;
position: relative;
}

Nota: es importante colocarlo en la etiqueta LI:HOVER creo que asi funcionara


"EL verdadero progreso consiste en renovarse" Alejandro Vinnet
[URL="http://adquieretuweb.com"]http://adquieretuweb.com[/URL]