menu dropdown colors

Hi All,

New to Squarespace, so far loving it. However, in my main menu I have a dropdown with two links. 

I have a menu item called 'contact' and it drops down to two menu items called 'contact us' and 'find a retailer'.
- When I hover over 'contact' the font changes colour to my desired.
- When I click on the sub menu find a retailer' both 'contact' and 'find a retailer' should change to my desired contact as they are the 'active' items. This bit works. 

My issue is that the non-active item 'contact us' also changes to the new colour instead of staying the same colour as the other non-active menu items. 

I have been trying for a while now, all different pieces of code, done a site inspect and just cannot seem to get this piece of the puzzle correct. 

Any help would be greatly appreciated. 

/*change menu colour on hover*/
.header-nav a:hover{
  color:#6C4E39 !important;
}
/*change menu colour of active page*/
.header-nav-item--active a {
  color: #6C4E39 !important;
}
.header-nav-folder-item--active a {
  color: #6C4E39 !important;
}

Hi! Can you share your site URL for context?

Thanks.

chicken-mango-ycap.squarespace.com
pwd: QLD

Try this code 

.header-nav a:hover {
  color: #6C4E39 !important;
}
.header-nav-item--active > a,
.header-nav-folder-item--active > a {
  color: #6C4E39 !important;
}
.header-nav a {
  color: #333;
}
.header-nav .header-nav-item--active .sub-menu a,
.header-nav .header-nav-folder-item--active .sub-menu a {
  color: #6C4E39 !important;
}
.header-nav .sub-menu a {
  color: #333;
}