Roll-over navigation menu

[geoapa]

Hey guys,
I'm trying to make a roll-over navigation menu in CSS.

I have all my text links in 1 row of a table.
Each text link in its own cell.

When I roll over the <b>cell</b> not just the text link but the entire cell, I want the following things to happen:

1. Cell background changes
2. text link changes

I can manipulate the cell background color change with the OnMouseOver function and a css class that changes the background-color of the cell, but is there a way also to change the color of the text link when the user rolls over the cell?

[DrDoc]

Use a:hover and make the anchor a block level element :)

[geoapa]

hmmm...

i don't know what your saying, but i know what you mean. :-)

can you provide an example for me?

Thanks

[wkitty42]

working example chopped from my site...

===== from the blah.css file =====
div#leftmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
width: 20%;
border-top: 1px solid white;
border-right: 1px solid white;
border-left: 1px solid white; /* no bottom border */
float: left;
}
div#leftmenu h3 {
font-size: 1em;
font-weight: bold;
background: #5f5f5f none;
color: white;
margin: 0;
padding: .1em;
border-bottom: 1px solid white;
text-align: center;
display: block;
}
div#leftmenu a {
color: #00ffff; /* aqua */
background: #000000 none; /*black with no image */
text-decoration: none;
border-bottom: 1px solid white;
padding-left: .8em;
padding-right: .8em;
display: block;
}
div#leftmenu a:link {
color: #00ffff; /* aqua */
background: #000000 none; /*black with no image */
text-decoration: none;
padding-left: .8em;
padding-right: .8em;
display: block;
}
div#leftmenu a:hover {
color: #ffff00; /* yellow */
background: #808080 none; /* gray with no image*/
padding-left: .8em;
padding-right: .8em;
display: block;
}
===== end =====

and then the html... i store my menus in seperate files and use serverside includes to put them in the pages...

===== leftmenu.html =====
<div id="leftmenu">
<h3>Choose your link!</h3>
<a href="/">Home</a>
<a href="/link1">link1</a>
<a href="/link2">link2</a>
<a href="/link3">link3</a>
<a href="/link4">link4</a>
</div>
===== end =====

should work if i cut and edited it properly ;)

[brdwlsh]

do a search on your favorite search engine for 'listamatic'.

this site was recommended to me a couple of days ago by a member of this forum.

lots of good info...