Menu hover texto se mueve

[juanpro]

Buenas tardes con todos, estoy realizando un menu en css que cuando paso el mouse encima de la opcion se muestra un triangulo en la parte inferior, es aglo estetico, el problemo esta que el texto tambien se mueve y la idea es solo que aparezca el triangulito.
Les dejo una imagen para que puedan apreciar mejor

http://www.technofeed.com.pe/menu.jpg


Les dejo la parte del codigo

nav a:hover
{
background: url("../imagenes/tri-menu.png") no-repeat scroll 50% 100% transparent;
color: #ffffff;
text-decoration: none;
position: relative;
top: 10px;
}

Gracias!!

[ArturoGallegos]

revisa los margenes, border, y el padding debe existir tanto en el link normal como en el hover, también ese top:10px que indicas debe ser igual en todos los estados de link (:link, :active, :visited, :hover)


y algo aun mas importante independientemente de tu menú, tu sitio tiene un virus, karpesky me ha bloqueado el acceso al detectar el virus.

[pzin]

Iniciado por Ag666

los margenes, border, y el padding debe existir tanto en el link normal como en el hover

No tiene porqué, ya que se heredan.

[ArturoGallegos]

Dado que los usuarios no siempre colocan el código completo involucrado me pareció buena idea que revisara eso... tal vez el código expuesto sea todo o tal vez no.

Generalmente los causantes de este problema son los bordes, margenes, padding, tamaño de letra, aplicar negritas unicamente al :hover

Pero sin poder ver todo el código implicado, o el sitio solo estaré adivinando.

[stramin]

Ag666 y Bonez están en lo correcto, en resumen lo que debes hacer es:

nav a:hover
{
background: url("../imagenes/tri-menu.png") no-repeat scroll 50% 100% transparent;
color: #ffffff;
text-decoration: none;
/*position: relative;*/
/*top: 10px;*/
}

o sea quitar las 2 últimas lineas.

[pzin]

Es de suponer que si pone esos atributos con sus propiedades, es lo que espera conseguir. ¿No? Vamos, espero que no sea ese el problema.

[juanpro]

gracias a todos por su colaboración, hise lo recomendado pero ahora el triangulito ya no sobre sale se queda dentro del texto.

En este caso tengo que hacer que ese triangulo baje un poco

[stramin]

para cambiar la posicion del fondo puedes hacer algo como esto:

nav a:hover
{
background: url("../imagenes/tri-menu.png") no-repeat scroll 50% 120% transparent;
color: #ffffff;
text-decoration: none;
}

[juanpro]

Gracias, pero se esconde con un z-index trato de que salga encima pero nada, alguna sugerencia

[stramin]

cambiar el nav a a 80% y el nav a:hover a 100% podría ser

la verdad no se como tienes diseñadas las imágenes ni los elementos, así que estoy solo imaginándome que tienes...

[juanpro]

disculpa que te moleste, pero ahi te dejo todo mi codigo del menu

nav
{
font-family: "Univers_Condensed";
font-size: 18px;
height: 45px;
margin: 0 auto;
width: 655px;
}

nav ul
{
margin: 0;
padding: 0;
text-align: center;
}

nav li
{
border-right: 1px solid rgba(256,256,256, 0.2);
float: left;
list-style: none;
}

nav a
{
color: #ffffff;
display: block;
height: 17px;
padding: 14px 15px;
text-decoration: none;
z-index: 3;
}

nav a:hover
{
background: url("../imagenes/tri-menu.png") no-repeat scroll 50% 120% transparent;
color: #ffffff;
text-decoration: none;
}

#bar-menu
{
background: url("../imagenes/fondo-lineas-menu.png") repeat #a1661d;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
height: 45px;
width: 100%;
}

[cesaroftheplanet]

el problema te lo generaba el z-index
debes buscar una alternativa en la maquetacion para no usarlo
es lo q t causa q se siga moviendo el texto luego de mover lo d position:relative.. q tambien estaba mal creo