Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Menú tipo Pestañas

Estas en el tema de Menú tipo Pestañas en el foro de CSS en Foros del Web. Tengo muy poca experiencia en CSS, por eso los molesto. en el siguiente menú, deseo que al pasar el mouse por arriba, en lugar que ...
  #1 (permalink)  
Antiguo 14/02/2014, 17:39
Avatar de canzoneta  
Fecha de Ingreso: diciembre-2003
Ubicación: Mendoza
Mensajes: 79
Antigüedad: 20 años, 3 meses
Puntos: 1
Pregunta Menú tipo Pestañas

Tengo muy poca experiencia en CSS, por eso los molesto. en el siguiente menú, deseo que al pasar el mouse por arriba, en lugar que la pestaña se alargue hacía abajo, lo haga hacía arriba.

Desde ya, gracias por la ayuda.

CSS:

Código HTML:
#multicolorido{
margin-left:auto;
margin-right:auto;
width: 900px;
}

#menuayuda-blogger {
margin:0px auto;
/* height:33px; */
}

#menuayuda-blogger ul {
margin:0;
padding:0;
/*padding-top:12px;*/
list-style:none;
}

#menuayuda-blogger li {
box-shadow: 1px 0px 1px 1px #7a7a7a; 
border-radius: 15px 15px 0 0;
float:left;
margin:0 !important;
padding:0 1px 0 0 !important;
font-family: 'Verdana', arial, serif;
list-style:none;
}

#menuayuda-blogger a {
font-size: 12px;
font-family: 'Verdana', arial, serif;
float:left;
text-decoration:none;
color:#fff;
margin:0;
padding: 12px 10px;
}

#menuayuda-blogger a:hover {
text-decoration:none;
color:#fff;
}

#menuayuda-blogger ul li.naranjo{ /*Naranjo*/
background: #f59c1b;
} 

#menuayuda-blogger ul li.naranjo:hover{
height:50px;
} 

#menuayuda-blogger ul li.celeste{ /*Celeste*/
background: #00addf;
} 

#menuayuda-blogger ul li.celeste:hover{
height:50px;
} 

#menuayuda-blogger ul li.verde{ /*Verde*/
background: #a2c64e;
} 

#menuayuda-blogger ul li.verde:hover{
height:50px;
} 

#menuayuda-blogger ul li.rojo{ /*ROJO*/
background: #e02309;
} 
#menuayuda-blogger ul li.rojo:hover{
height:50px;
} 
#menuayuda-blogger ul li.gris{ /*GRIS*/
background: #4d4c4c;
} 

#menuayuda-blogger ul li.gris:hover{
height:50px;
} 

#menuayuda-blogger ul li.azul{ /*AZUL*/
background: #0071a9;
} 

#menuayuda-blogger ul li.azul:hover{
height:50px;
}
HTML:
Código HTML:
<div id='multicolorido'><div id='menuayuda-blogger'>
<ul>
<li class='naranjo'><a href='#'>Título 1</a></li>
<li class='celeste'><a href='#'>Título 2</a></li>
<li class='verde'><a href='#'>Título 3</a></li>
<li class='rojo'><a href='#'>Título 4</a></li>
<li class='gris'><a href='#'>Título 5</a></li>
<li class='azul'><a href='#'>Título 6</a></li>
</ul>
</div></div> 
  #2 (permalink)  
Antiguo 15/02/2014, 00:30
 
Fecha de Ingreso: enero-2014
Mensajes: 7
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Menú tipo Pestañas

Hola,

Intenta estos cambios:

Código CSS:
Ver original
  1. #menuayuda-blogger li {
  2. position: relative;
  3. height: 40px;
  4. ...
  5.  
  6. #menuayuda-blogger li.naranjo:hover{
  7. height:50px;
  8. top:-10px;
  9. }
  #3 (permalink)  
Antiguo 15/02/2014, 00:51
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 7 meses
Puntos: 60
Respuesta: Menú tipo Pestañas

añadeles a las clases (que deberían ser id) de los colores:

position: relative;
top: -12px;
  #4 (permalink)  
Antiguo 15/02/2014, 00:54
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 7 meses
Puntos: 60
Respuesta: Menú tipo Pestañas

Como lo dijo victorgspx está más optimizado que como lo puse yo. Asique aplica mejor su metodo

Etiquetas: horizontal, pestañas
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 04:52.