Menú desplegable detras del texto

[Pilly]

Buenas noches foreros!!!!!

Estoy diseñando un menú desplegable pero cuando paso el mouse por sobre el botón del menú base el menú desplegable queda detrás de textos e imagenes, porque puede suceder esto?, les envío la imagen de como se me esta desplegando.

Muchas gracias por su ayuda de antemano,
Pilly

[BKS]

Hola

Es probable que tengas problemas por el z-index, ordena tus capas puede que se te solucione.

[Pilly]

Muchas gracias por tu respuesta pero no tengo z-index en las clases donde estan las clases.
que hace el z-index?, que función hace que mi menú se despliegue delante de texto o imagenes?

Por favor ayudame que estoy complicada con este tema.
Muchas gracias
Pilly

[Mikmoro]

Si X e Y son las coordenadas habituales para marcar las dos dimensiones de ancho y alto, Z es la tercera dimensión, digamos "profundo". Con z-index lo que haces es ordenar las capas desde ti que miras la pantalla hacia el fondo (como en los programas de diseño gráfico: al frente, atrás, etc.).
En este caso lo que se usa es un número entero para indicar qué estara delante de qué, o más cerca o lejos de ti, del primer plano. El cero sería el fondo, y a mayor número más se acercará al primer plano. Se usa en las css, de manera por ejemplo:

.miclase{
positión: absolute;
z-index: 0;
}

si ahora añades otra clase:

.miclase2{
positión: absolute;
z-index: 1;
}

al poner objetos con esas clases, en caso de que los colocaras en la misma posición o similar en la pantalla (en un lugar que se montaran), .miclase2 quedaría delante y tapando a .miclase.

En tu caso concreto, si pones el código será más fácil ver qué ocurre.

[Pilly]

muchas gracias por las respuestas, la verdad es que he estado un tanto ocupada y solo hasta ahora he logrado solucionar el problema que tenia de capas en mi menú, pero ahora tengo otro problema y es que cuando paso con el mouse sobre el menú, este desaparece inmediantamente y no me deja navegar libremente a través de las distintas opciones del submenú que tengo, cómo puedo hacer que se prolonge el link en todo el menú porque es muy dificíl navegar en este, les agradezco muuucho por todo lo que ya me han ayudado y por lo que me puedan ayudar.
Saludos,
Pilly

[Pilly]

se me olvido colocar el css, lo siento
los nav2 y nav3 son los que utilizo para el despliegue del submenú

Código:

/*Submenú */

#nav2 a{
	display: block;
	margin-bottom: 1px;
}


#nav2 li.active a.topdaddy {
	background: none;
	padding-right: 25px;
}

#nav2 ul ul a.daddy {
	background: none;
}

#nav2 li a {
	background: silver;
}

#nav2 li li a{
	background: Silver;
	font-weight: bold;
	padding: 0;
	text-indent: 5px;
   font-size: 12px;
	width: 185px;
	height: 16px;
	
}

#nav2 ul li a:hover,
#nav2 ul li ul li a:hover,
#nav2 ul li ul li ul li a:hover {
	color: gray;
	
	
}

#nav2, #nav2 ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 250px;
}

#nav2 li li {
	padding: 0;
	background: none;
	border-bottom: 1px solid black;
}

/* top level links */
#nav2 a.topdaddy,

/* sub level links */

#nav2 ul ul a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	width: 250px;
	text-transform: none;
	
}

/* top level buttons */

#nav2 li {
	float: left;
	padding: 0;
   background: none;
   height: 43px;
   

}

#nav2 ul li {
	position: relative;
}

#nav2 li ul {
	top: 3px;
	position: absolute;
	left: -666em;
	height: auto;
	width: 150px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	padding: 0px;
	border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
	}
	
#nav2 ul {
	padding: 0;
	margin: 0;
	margin-left: 1px;

}

#nav2 li li {
	float: left;
	padding: 0;
   width: 150px;
	height: 16px;
	font-size: 22px;
   border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
}

/* margin for pullouts */
#nav2 li ul ul {
	margin: -31px 0 0 170px;

}


#nav2 li:hover ul ul, 
#nav2 li:hover ul ul ul,
#nav2 li:hover ul ul ul ul,  
#nav2 li.sfhover ul ul, 
#nav2 li.sfhover ul ul ul, 
#nav2 li.sfhover ul ul ul ul {
	left: -666em;
	
	
}

#nav2 li:hover ul, 
#nav2 li li:hover ul, 
#nav2 li li li:hover ul, 
#nav2 li li li li:hover ul,
#nav2 li.sfhover ul, 
#nav2 li li.sfhover ul, 
#nav2 li li li.sfhover ul,
#nav2 li li li li.sfhover ul{
	z-index: 100;
	left: 175px;
		
	
}

#nav2 li:hover, #nav2 li.sfhover {
      left: 0;
}

#nav2 li:hover a, #nav2 li.sfhover a {
    color: black;

}

#nav2 li li:hover a, #nav2 li li.sfhover a {
    color: #ffffff;

}

/* suckerfish */
#nav2 a {
	background: none;
	
}

#nav2 ul ul a {
	background: none;
	color: #ffffff;

}

#nav2 li.active {
	background: none;
	
}

#nav2 li li.active {
	background: none;
	

}

#nav2 li:hover ul, 
#nav2 li li:hover ul, 
#nav2 li li li:hover ul, 
#nav2 li li li li:hover ul,
#nav2 li.sfhover ul, 
#nav2 li li.sfhover ul, 
#nav2 li li li.sfhover ul,
#nav2 li li li li.sfhover ul{
	background: #C7C7C7;

}

/*Submenú 3*/

#nav3 a{
	display: block;
	margin-bottom: 1px;
	
}


#nav3 li.active a.topdaddy {
	background: none;
	padding-right: 25px;
}

#nav3 ul ul a.daddy {
	background: none;
}

#nav3 li a {
	background: none;
}

#nav3 li li a{
	background: Silver;
	font-weight: bold;
	padding: 0;
	text-indent: 5px;
   font-size: 12px;

	
}

#nav3 ul li a:hover,
#nav3 ul li ul li a:hover,
#nav3 ul li ul li ul li a:hover {
	color: Gray;
	
	
}

#nav3, #nav3 ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 250px;
}

#nav3 li li {
	padding: 0;
	background: none;
	border-bottom: 1px solid black;
}

/* top level links */
#nav3 a.topdaddy,

/* sub level links */

#nav3 ul ul a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	width: 250px;
	text-transform: none;
	
}

/* top level buttons */

#nav3 li {
	float: left;
	padding: 0;
   background: none;
   height: 40px;
   

}

#nav3 ul li {
	position: relative;
}

#nav3 li ul {
	top: 50px;
	position: absolute;
	left: -666em;
	height: auto;
	width: 250px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	padding: 0px;
	border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
	}
	
#nav3 ul {
	padding: 0;
	margin: 0;
	margin-left: 1px;

}

#nav3 li li {
	float: left;
	padding: 0;
   width: 250px;
	height: 16px;
	font-size: 22px;
   border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
}

/* margin for pullouts */
#nav3 li ul ul {
	margin: -31px 0 0 170px;

}


#nav3 li:hover ul ul, 
#nav3 li:hover ul ul ul,
#nav3 li:hover ul ul ul ul,  
#nav3 li.sfhover ul ul, 
#nav3 li.sfhover ul ul ul, 
#nav3 li.sfhover ul ul ul ul {
	left: -666em;
	
	
}

#nav3 li:hover ul, 
#nav3 li li:hover ul, 
#nav3 li li li:hover ul, 
#nav3 li li li li:hover ul,
#nav3 li.sfhover ul, 
#nav3 li li.sfhover ul, 
#nav3 li li li.sfhover ul,
#nav3 li li li li.sfhover ul{
	z-index: 100;
	left: 180px;
		
	
}

#nav3 li:hover, #nav3 li.sfhover {
      left: 0;
}

#nav3 li:hover a, #nav3 li.sfhover a {
    color: black;

}

#nav3 li li:hover a, #nav3 li li.sfhover a {
    color: #ffffff;

}

/* suckerfish */
#nav3 a {
	background: none;
	
}

#nav3 ul ul a {
	background: none;
	color: #ffffff;

}

#nav3 li.active {
	background: none;
	
}

#nav3 li li.active {
	background: none;
	

}

#nav3 li:hover ul, 
#nav3 li li:hover ul, 
#nav3 li li li:hover ul, 
#nav3 li li li li:hover ul,
#nav3 li.sfhover ul, 
#nav3 li li.sfhover ul, 
#nav3 li li li.sfhover ul,
#nav3 li li li li.sfhover ul{
	background: #C7C7C7;

}