Question

Ok this is really irritating me! I’ve been at it for an hour plus researching online. Well I added the #top-section li:hover a so when I’m still in the submenu, it will keep the parent link hovered.
Welp, my problem is is that it’s also changing the link color of the sub menu. When the links are suppose to be gray.

In #top-section ul ul li a, I have the color as #8b8b8b. But the #top-section li:hover a is changing them… and it’s irritating the crap out of me!
I can’t find a way to fix it besides jQuery which is all too confusing for me since I hate building navigations relying solely on jQuery.

Here is my CSS:

    #top-section li:hover a, #top-section li a:hover {
    background: #fff;
    color: #bb461d;
}

Then here is the part that is being changed:

        #top-section ul ul li a {
        display: block;
        padding: 3px 4px;
        width: 156px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        color: #8b8b8b;
        font-weight: normal;
    }

I just have no idea why it’s overwriting it when it’s listed second.. and it’s going DIRECTLY on the submenu li a’s…
Can someone help me out?

Here is the full CSS, but you don’t need to read it if you don’t need it. Just for reference:

    #top-section ul { list-style: none; }
#top-section li {
    display: block;
    float: left;
    position: relative;
    z-index: 500;
}
#top-section a {
    color: #b3b3b3;
    display: block;
    float: left;
    padding: 0 8px 0 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 9px 35px 9px 9px;
}
#top-section li:hover a, #top-section li a:hover {
    background: #fff;
    color: #bb461d;
}
    /*** nested list ***/
    #top-section ul ul {
        display: none;
        position: absolute;
        left: 0;
        margin: 32px 0 0 -1px;
        list-style: none;
        background: #fff;
        border: 1px solid #ababab;
        border-top: none;
        width: 312px;
    }
    #top-section ul ul li {
        width: 156px;
        margin: 0;
    }
    #top-section ul ul li a {
        display: block;
        padding: 3px 4px;
        width: 156px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        color: #8b8b8b;
        font-weight: normal;
    }
    #top-section ul ul li a:hover {
        color: #8b8b8b;
        background: #ececec;
    }

Answer 1

Stating a color value second doesnt mean it’s given priority. Use !important for example:
color: #8b8b8b !important;. If that doesn’t work then take another look at your css, there’s a lot of overlaps for your elements, so it could be that.