menu css :hover

[shezard]

Buenas a todos primero de todo indicaros que soy nuevo en el foro i es evidente este es mi primer mensaje , dicho esto estoy atascado en un menu css en el apartado del hover

mi intencion es que cuando pase el raton por encima el fondo cambie de color pero que mantenga en todo momento el tamaño del cuadro que le he dado , el caso es que no se como hacerlo apra determinar el tamaño del cuadro del hover, lo he intentado tanto con listas como con tablas i la verdad ya no se que hacer, ahi va el codigo de las listas

#barramenu {
background-repeat: repeat-x;
margin-right: auto;
margin-left: auto;
background-image: url(../imatges/barramenu.png);
height: 50px;
width: 900px;
}
#barramenu ul {
list-style-type: none;
padding-left: 60px;
text-align: center;
vertical-align: middle;
padding-top: 15px;
font-size: 16px;
font-family: LondonBetween;
text-transform: uppercase;
word-spacing: 130px;
}
#barramenu ul li {
display: inline;
height: 50px;
width: 225px;
}
#barramenu ul li a {
color: #2e74dd;
text-decoration: none;
}
#barramenu ul li a:link {
color: #2e74dd;
}
#barramenu ul li a:visited {
color: #2e74dd;
text-decoration: none;
}
#barramenu ul li a:hover {
color: #2e74dd;
background-image: url(../imatges/menu2.png);
padding-top: 15px;
padding-bottom: 15px;
background-repeat: repeat-x;

y ahi va la de la tabla :

<style type="text/css">
td {
text-align: center;
vertical-align: middle;
margin: 0px;
padding: 0px;
}
body table tr td a:link {
font-family: LondonBetween;
text-decoration: none;
color: #FFF;
text-transform: uppercase;
margin: 0px;
padding: 0px;
}
body table tr td a:visited {
font-family: LondonBetween;
text-transform: uppercase;
color: #FFF;
text-decoration: none;
}
body table tr td a:hover {
color: #00C;
background-color: #FFF;
height: 50px;
width: 200px;
padding-top: 15px;
padding-bottom: 15px;
background-repeat: repeat-x;
background-image: url(imatges/fonshover.png);
}
</style>

muchas gracias por adelantado

[evairdesign]

Pon el HTML igual ps! tal vez te pueda ayudar.

¿Quieres hacer algo com esto?
http://virtualquimia.50webs.com/demo/columasFilasColoreables.html

Si es así, es conveniente que utilices javascript

[C2am]

Como es el foro de css, primero tratemos de dar respuestas en ese sentido, luego, si lo que desea no es posible con css puro, entonces sí sugerir algún lenguaje de programación.

Ahora, haces un hover sobre un elemento de linea <a>:

Código CSS:

#barramenu ul li a:hover {
color: #2e74dd;
background-image: url(../imatges/menu2.png);
padding-top: 15px;
padding-bottom: 15px;
background-repeat: repeat-x;
 

Le estas diciendo que al pasar el puntero por sobre el elemento <a> cambie de color la fuente, se le agregue una imagen de fondo, y cree un espacio superior e inferior de 15px, que es lo que provoca que se redimensione tu menú.

Para menus con css podés consultar : araudi.net que tiene varios ejemplos en puro css.

Estudia esos ejemplos y plantea de nuevo tu código.
Saludos

PD: NO uses tablas para maquetar, no uses tablas para el menú, usa listas, es decir tu primera opción.

[shezard]

Muchas gracias por la ayuda a ver que puedo hacer

[antoniohc]

Por si te interesa y te sirve de ayuda te dejo dos videotutoriales que hice, en el que muestro paso a paso cómo crear menú desplegable con HTML y CSS, seguro que te aclara algún concepto, en HD y en Español.

Menú desplegable sencillo (Vertical):
http://www.youtube.com/watch?v=NIrdQFgqlsk

Menú desplegable avanzado con animaciones y transiciones CSS3 (horizontal):
http://www.youtube.com/watch?v=dlDQ43y3vUE

[kseso?]

@antoniohc :
La primera ver que usted enlazó su videotuto, registrándose exprofeso para ello y abriendo un tema, pudo pasar como alguien que ha hecho un trabajo y lo pone a disposición del resto:
1
Su segunda intervención para enlazar lo mismo ya daba que pensar:
2

Pero que su tercer comentario, aquí, sea para lo mismo, podría dar base para pensar que su única razón de estar y participar en este foro sea únicamente para hacer spam de su videotuto.

Sospechas que se volverían certezas si en alguno de sus próximos 30 (como mínimo) comentarios lo vuelve a enlazar.

Sin entrar a valorar la calidad del mismo o lo acertado de mostrar css en vídeo. Cosa que no puedo hacer porque no lo he visionado.