Почему атрибут цвета.active не применяется?

Question

При наличии активного элемента div для изменения внешнего вида активного элемента меню (с использованием jquery) цвет фона изменяется, как и ожидалось (с белого на черный), однако атрибут цвета текста (с черного на белый) - нет. Зачем? - и как я могу это исправить?

CSS

.menu {
    width: 475px;
    margin: 0 auto;
}

.menu ul {
    min-width: auto;
    margin: 0 auto 0 auto;
    padding: 23px 0 0 0;
}

.menu li {
    list-style-type: none;
    float: left;
}

/*selected tag changes appearance*/
.active {
    background-color: #4a4a4a;
    color: #FFFFFF;
}

/*attributes of individual nav button*/
.menu a {
    text-decoration: none;
    width: 75px;
    padding: 10px;
    float: left;
    text-align: center;
    color: #4a4a4a;
}

/*changes appearance of menu item on hover*/
.menu a:hover {
    background-color: #4a4a4a;
    color: #FFFFFF; 
    -webkit-transition: color, background-color .4s; /* Safari */
    transition: color, background-color .4s;
}

JS

$(document).ready(function(){
    $('.menu a').click(function() {
    $(".menu a").removeClass("active")
    $(this).addClass("active")
    });
});

HTML

<div class="menu">
            <ul>            
                <li><a href="#1">1</a></li>
                <li><a href="#2">2</a></li>
                <li><a href="#3">3</a></li>
                <li><a href="#4">4</a></li>
                <li><a href="#5">5</a></li>
            </ul>
        </div>
</html>

$(document).ready(function() {
  $('.menu a').click(function() {
    $(".menu a").removeClass("active")
    $(this).addClass("active")
  });
});

.menu {
  width: 475px;
  margin: 0 auto;
}
.menu ul {
  min-width: auto;
  margin: 0 auto 0 auto;
  padding: 23px 0 0 0;
}
.menu li {
  list-style-type: none;
  float: left;
}
/*selected tag changes appearance*/

.active {
  background-color: #4a4a4a;
  color: #FFFFFF;
}
/*attributes of individual nav button*/

.menu a {
  text-decoration: none;
  width: 75px;
  padding: 10px;
  float: left;
  text-align: center;
  color: #4a4a4a;
}
/*changes appearance of menu item on hover*/

.menu a:hover {
  background-color: #4a4a4a;
  color: #FFFFFF;
  -webkit-transition: color, background-color .4s;
  /* Safari */
  transition: color, background-color .4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ul>
</div>

Answer 1

Это из-за специфики CSS. Селектор .menu a является более конкретным, чем просто .active поэтому он имеет приоритет на color, Попробуйте изменить .active в .menu a.active,

Answer 2

Попробуйте этот код

/*selected tag changes appearance*/
.menu > ul > li > .active {
    background-color: #4a4a4a;
    color: #FFFFFF;
}