Question

I have this code, please observe this fiddle:
http://jsfiddle.net/VjhJ4/19/

When you hover over the words, the text color changes to white – which is how I want it. However, when hovering over the 20px border-bottom, the text color does not change to white. Just hover your mouse over the border-bottom and check.

How do I make so that the text color changes to white when you hover the bottom as well? I currently have hover settings on ul#secondary-menu a:hover { color: #FFFFFF;}

Answer 1

Just add (or amend your existing CSS to include) the following:

#second-menu ul.nav li:hover a {
    color: #fff;
}​

JS Fiddle demo.

Can you explain why it was not changing the hover previously and how this helped. As I mentioned, my coding knowledge is limited so I am trying to learn what the issue was here

It wasn’t changing the hover effects previously because you’d, presumably (and I am presuming, I gave up reading your CSS less than half-way through), specified a :hover rule for the a element that was a child of the li element, but the border is attached to the li, not the a. So hovering over the li‘s border had no effect.

This rule simply specifies that the colour of the a element within the li should be white (#fff) in response to the mouse hovering over the li element. In practice, placing this rule at the end of the stylesheet caused it to override any other conflicting rules that might have been declared elsewhere (and, once again, I gave up reading the stylesheet due to its length).

I’d recommend finding whatever rule you have that defines the a:hover effects, and add the two rules together, for example:

#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
    color: #fff;
}

The specificity may not need to be quite so high, so you might be able to reduce the selector, to something shorter like:

ul.nav li a:hover,
ul.nav li:hover a {
    color: #fff;
}

Oh, and it’s worth noting that you have quite a mix of in-line (style="...") and external styles (using a stylesheet); try and use only the external form, for clarity and for ease of updating, editing and maintaining.