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