CSS Inheritance issues, please help.

This may be an elementary question, but I am just learning so please bear with me.

I am having some issues with my navigation bar. When I click on one of the items that have child items the text color of the item selected inherits to the child menu items. How would I go about preventing this inheritance? What is supposed to happen is the parent item, when clicked should just have a black font and the child items have a gray font. But what happens instead is when I click the parent all the child items have a black font. Everything else works as it should except for that problem.

To get a better idea of the problem go to my website and click on Level 1 in the menu bar. Then hover over it, there will be Level 2 which in itself has a child menu, Level 2B and Level 2C. Notice that when Level 1 is selected all the child items have a black font instead of gray. Click on anywhere else including the child menu items and they work as they should. Even clicking on just Level 2, you get Level 3, Level 3B and Level 3C. Clicking on Level 2 will make all Level 3 child items’ font black. Very annoying and I’m not too sure how to fix this issue.

Here is the code in question:

.navigation-menu {
    position: relative;
    float: left;
    padding: 0;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    margin: 0 0 0 10%;
    text-align: center;
}
.main-navigation {
    position: relative;
    float: left;
    clear: both;
    display: block;
    float: left;
    width: 100%;
    background: #fff;
    background: hsla( 0, 0%, 100%, 1 );
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    float: left;
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 1em 1em;
    font-size: 14px;
    font-size: 1.4rem;
    text-decoration: none;
    line-height: 1em;
    color: #aaa;
    color: hsla( 0, 0%, 67%, 1 );
}

.main-navigation ul ul {
    position: absolute;
    left: 0;
    z-index: 99999;
    display: none;
    float: left;
    padding: 0;
    color: #aaa;
    color: hsla( 0, 0%, 67%, 1 );
    background: #fff;
    background: hsla( 0, 0%, 100%, 1 );
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul ul li {
}

.main-navigation li:hover > a {
    color: #000;
    color: hsla( 0, 0%, 0%, 1 );
}

.main-navigation ul ul :hover > a {
    color: #000;
    color: hsla( 0, 0%, 0%, 1 );
}

.main-navigation ul ul a:hover {
    color: #000;
    color: hsla( 0, 0%, 0%, 1 );
}

.main-navigation ul li:hover > ul {
    display: block;
}

.main-navigation ul ul li:hover > ul {
    left: 100%;
}

.main-navigation .current_page_item a,
.main-navigation .current-menu-item a
.main-navigation .current-page-item a:hover,
.main-navigation .current-menu-item a:hover {
    color: #000;
    color: hsla( 0, 0%, 0%, 1 );
}

.main-navigation .current_page_ancestor {
    background: #ddd;
    background: hsla( 0, 0%, 87%, 1 );
}

.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
    background: #ddd;
    background: hsla( 0, 0%, 87%, 1 );
}

And the link to the website in question: website

*Edit*
I’m using a sub-domain of a friend, please don’t take the domain name personal as it does not reflect me, it’s just for free usage until I get my own hosting. Thanks.