Question

I’m trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)

As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what I understand, that means it’s been overidden, but I don’t know what by…

If anyone has a similar code feature in their browser, I would really appreciate it if you could check it out. I made the menu all by myself, so I’d like to think I can code, but I just can’t understand what’s overiding the font colour.. I think it’s line 73 of the new_menu_style.css file.

Answer 1

You should try adding this to the CSS:

.menu ul li:hover ul li a {
    color: #ccc;
}
.menu ul li:hover ul li a:hover {
    color: black;
}

The .menu ul li:hover a gets a higher weight than the other one, overriding it.