Foros del Web » Creando para Internet » CSS »

Menú desplegable detras del texto

Estas en el tema de Menú desplegable detras del texto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/01/2007, 16:58
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 12 años, 2 meses
Puntos: 0
Menú desplegable detras del texto

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
  #2 (permalink)  
Antiguo 19/01/2007, 03:04
Avatar de BKS
BKS
 
Fecha de Ingreso: enero-2003
Ubicación: Santa cruz de Tenerife
Mensajes: 176
Antigüedad: 14 años, 11 meses
Puntos: 7
Re: Menú desplegable detras del texto

Hola

Es probable que tengas problemas por el z-index, ordena tus capas puede que se te solucione.
  #3 (permalink)  
Antiguo 24/01/2007, 14:26
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 12 años, 2 meses
Puntos: 0
Re: Menú desplegable detras del texto

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
  #4 (permalink)  
Antiguo 24/01/2007, 17:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Menú desplegable detras del texto

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.
  #5 (permalink)  
Antiguo 08/02/2007, 15:39
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 12 años, 2 meses
Puntos: 0
Re: Menú desplegable detras del texto

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
  #6 (permalink)  
Antiguo 08/02/2007, 16:50
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 12 años, 2 meses
Puntos: 0
Re: Menú desplegable detras del texto

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;

}
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 22:02.