Foros del Web » Creando para Internet » CSS »

linea debajo del menu

Estas en el tema de linea debajo del menu en el foro de CSS en Foros del Web. Hola junto con saludarlos me dirijo a uds con una consulta , al parecer muy basica pero no eh encontrado como realizarlo hasta ahora, la ...
  #1 (permalink)  
Antiguo 11/02/2012, 09:59
Avatar de xaskon23  
Fecha de Ingreso: febrero-2011
Mensajes: 61
Antigüedad: 11 años, 6 meses
Puntos: 0
linea debajo del menu

Hola junto con saludarlos me dirijo a uds con una consulta , al parecer muy basica pero no eh encontrado como realizarlo hasta ahora, la consulta es como puedo colocar una linea de color rojo debajo del menu y al pasar sobre cualquier opcion de ese menu que tambien aparesca esa linea , un ejemplo de esto esta en la siguiente imagen :



y en el menu presente en la pagina web : http://jquery.com/

de antemano Muchas graciass...
__________________
" "Seamos realistas y hagamos lo imposible." "
  #2 (permalink)  
Antiguo 11/02/2012, 15:55
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 13 años, 1 mes
Puntos: 269
Respuesta: linea debajo del menu

Hola. Podes usar border-bottom junto al pseudoelemento :hover
Para que un elemento quede activo pordes usar una clase.

Saludos.
  #3 (permalink)  
Antiguo 12/02/2012, 16:34
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 10 años, 6 meses
Puntos: 4
Respuesta: linea debajo del menu

hola, utilizas css?
si es asi podes hacer lo siguiente:

<div id="botmenu">
<ul>
<li><a href="#" rel="nofollow">inicio</a></li>
<li><a href="#" rel="nofollow">Historia</a></li>
<li><a href="#" rel="nofollow">Contactanos</a></li>
</ul>

</div>

en el css:

#botmenu
{

}

#botmenu li
{

}

#botmenu li a
{
border-bottom:none;
}

#botmenu li a:hover
{
border-bottom:red;
}

si no entiendes algo me avisas
  #4 (permalink)  
Antiguo 13/02/2012, 16:30
Avatar de xaskon23  
Fecha de Ingreso: febrero-2011
Mensajes: 61
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: linea debajo del menu

Gracias por sus respuestas , conseguí realizar lo que quería utilizando lo que ud me recomendaron , pero tengo un pequeño problema al situar el puntero sobre la clase activa presente en el menu, ya que este se sobrepone, mostrando un linea de mayor gruesor sobre este elemento , alguien sabe como puedo solucionar esto??


les dejo parte del codigo en donde puede estar el error:


/***************** CSS ********************/
.nav .active {
border-bottom: 3px solid #C00;
}

.nav > li > a:hover {
text-decoration: none;
background-color: #eeeeee;
border-bottom: 3px solid #C00; /* linea de prueba color rojo menu*/


}

/************************************************** *********/

/************* Html ************/

<div class="menu">
<ul class="nav">
<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Acerca</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>

/*****************************/

de antemano muchas gracias!!....
__________________
" "Seamos realistas y hagamos lo imposible." "
  #5 (permalink)  
Antiguo 13/02/2012, 17:43
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 10 años, 6 meses
Puntos: 4
Respuesta: linea debajo del menu

hola, no entendi muy bien lo que necesitas. segun lo que entendi es que al pasar el mouse por ensima del boton se hace mas grande por que se agrega la linea roja. Si este es tu problema lo que te recomiendo hacer es lo siguiente:

en esto que te dije antes, en vez de ponerlo asi:
#botmenu li a
{
border-bottom:none;
}

lo pones de la siguiente forma:
#botmenu li a
{
border-bottom:(aca el color de el menu cuando esta normal);
}

entonces, el boton no se agranda, sino que el borde cambia de estar de color de como estaba el menu a rojo. saludos

pd: si no llega a ser este tu problea expliate mejor. saludos

Etiquetas: debajo
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 10:15.