CS6 #nav links change hover background color based on its position in series

Question

First post from a complete DW CS 6 novice on Win7.  Not knowing JavaScript or JQuery, I thought I would add simplest animation to a website navigation based on the two col fixed header footer design. The navigation links on the left <sidebar1> have been increased to 24, with a common link background in the default state.  When the cursor is passed over the links they would change background color to one of five given in the image placed in the jpeg image loaded as the 1st list item.  The image itself only acts as a color key to the five catagories of links directly below it, and is not hyperlinked.  The idea is that someone looking for new tools would need to hover down the nav links and only be concerned with the Yellow background ones, even if they appear in any random position down the list.  To give each link a color to start with would make <sidebar1> appear too colorful.
I have David Powers' two dvd titles and was thinking of using a nth-of-type() .  It does not work.  Perhaps there are two sets of colons required (  a:hover:nth-of-type(4), a:active:nth-of-type(4) {background-color:#f00;}   ).  There is surely a way that would work but I do not know enough of DW and CSS at present to figure this out.
Many thanks.

Answer 1

I don't what menu system you're using, but you might be able to create some CSS classes to use in your menu like so:
<ul>
<li>a href="some-link.html" class="about">about link</a></li>
<li>a href="some-link.html" class="new">new link</a></li>
<li>a href="some-link.html" class="new_proc">new procedures link</a></li>
<ul>
CSS:
li a.about:hover {background-color:gray}
li a:new:hover {background-color:forestgreen}
li a:new_proc:hover {background-color:lawngreen}
and so on...
Nancy O.