Текущее меню Цвет CSS Навигация

Question

У меня проблемы с текущими пунктами меню, и они не показывают правильный цвет.

Страница находится здесь: http://new.leicesterymca.co.uk/youth-community/our-work/youth-homelessness/ Проблема, с которой я столкнулся, связана с навигацией в левой боковой панели.

Молодежь бездомных - амбиции

Мы находимся на странице "Молодежь бездомности", поэтому пункт меню "Амбиции" не должен быть того же темно-синего цвета, что и "Молодежь бездомности". Это должно быть #8fa9ba (светло-синий).

Если вы нажмете на странице Амбиции, они на самом деле отображаются так, как я хочу...

CSS, с которым я работаю, находится здесь:

/* ------ Menu Level 3 -------*/



.sub-nav-left {
  margin:68px 0 0 0;
  padding:0;
  font-weight: bold;
}

.sub-nav-left a {
  text-decoration: none;
  color: #2f9395;
}

.sub-nav-left a:hover {
  color: #163a52;
}

.sub-nav-left  ul {
  width: 95%;
  margin: 0;
  padding: 0;
}

.sub-nav-left li {
  margin: 0 0 0 0;
  padding: 10px 0 10px 0;
  text-indent: 0;
  border-bottom: 1px solid #e9eaeb;
}

.sub-nav-left li:before {
  content: none;
}

.sub-nav-left li:last-child {
  border-bottom: none;
}

.sub-nav-left .sub-menu li {
  text-indent: 20px;
  padding: 5px 0 0 0;
  border: none;
}

.sub-nav-left .sub-menu a {
  color: #9fcac7;
}

.sub-nav-left .sub-menu a:hover {
  color: #8fa9ba;
}






/* STYLING FOR THE CURRENT MENU ITEMS - Menu Level 3 */


/* This styles the top level parent item */
.sub-nav-left .current-menu-parent > a {
  color: #163a52;
}

/* This styles the dropdown menu current item  */
.sub-nav-left .current-menu-item a {
  color: #163a52;
}

/* This styles the sub menu */
.sub-nav-left .current-menu-item a {
  color: #163a52;
}






/* STYLING FOR THE CURRENT MENU ITEMS - Menu Level 3 - Sub */


/* This styles the top level parent item */
.sub-nav-left .sub-menu .current-menu-parent > a {
  color: #8fa9ba;
}

/* This styles the dropdown menu current item  */
.sub-nav-left .sub-menu .current-menu-item a {
  color: #8fa9ba;
}

/* This styles the sub menu */
.sub-nav-left .sub-menu .current-menu-item a {
  color: #8fa9ba;
}

Answer 1

Более темный цвет (#163a52) должен применяться только к прямым потомкам .current-item, право? Если это так, вы можете изменить селектор на это:

.sub-nav-left .current-menu-item > a вместо .sub-nav-left .current-menu-item a