Fondo en los menus

[eugeniodiaz]

Hola a todos.
Mi problema ahora es el siguiente:
Quiero poner un menú de navegación en la izquierda con texto pero que el fondo cambie de color al pasar el ratón. Estoy intentando hacerlo en base a css, pero no doy con ello.
Un ejemplo de lo que quiero hacer es el menú de esta pag:
oxfordcity.co.uk/oxford/home_accommodation.html
Me podeis echar una mano o darme alguna pista.
Gracias anticipadas, un saludo.

[Jorolo]

Hola eugeniodiaz.

¿Te refieres a algo como esto?

http://www.forosdelweb.com/showthrea...ht=sem%E1ntica

[eugeniodiaz]

Gracias pero no entiendo bien que quieres decir.
Lo que quiero es lo que hace la web que indico arriba.
En cualquier caso muchas gracias.

[Jorolo]

Hola eugeniodiaz.

El efecto sobre el que consultas de la web que indicaste está realizado hasta donde yo he visto con las denominadas seudoclases.

El menu que mencionas hace un uso estenso de diversas seudoclases, me pareció más didáctico ofrecerte un código mucho más simple y breve en el que se hace uso de una sola seudoclase :hover

Siento que no lo hayas entendido. Me suele pasar.

Con un poco de suerte otro forista te lo esplicará mejor que yo.

[Ami]

Hola

En este enlace está lo que buscas: http://css.maxdesign.com.au/listamatic/vertical08.htm, ahí puedes ver el ejemplo en acción más su respectivo código, el cual pego más abajo.

Checa también el enlace principal, que ya había recomendado en otro post, porque hay una cantidad enorme de ejemplos de menús para escoger http://css.maxdesign.com.au/listamatic/index.htm y http://css.maxdesign.com.au/listamatic2/index.htm

-------

Author: Russ Weakley

Comments: Rollovers can be achieved by converting the a elements within the list to blocks using display: block; and swapping background colors using the a:hover pseudo-class.

Browser support chart
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}