Re: nav rollover problems

[SgtLegend]

In your code you currently have the following:

#sub-navigation li a:hover {

text-decoration: none;

background-color: #666;

}



#sub-navigation li a:hover span {

background-color: #666;

}

When your working with child elements you need to remember that whatever selector chain you used before the next selector has to be the same or greater then the previous selector it the change won’t take effect. In the above code you posted the :nth-child() selectors are chained with the UL element while the hover states only direct themselves to the li element which is a lower level selector chain compared to the code before it.

To fix this all you need to do is simply add UL to the selector chain and the hover state will work fine:

#sub-navigation ul li a:hover {

text-decoration: none;

background-color: #666;

}



#sub-navigation ul li a:hover span {

background-color: #666;

}