linea debajo del menu

[xaskon23]

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...

[cristian_cena]

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

Saludos.

[brai_lf]

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

[xaskon23]

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!!....

[brai_lf]

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