Changing colour of dropdown menu text with transition

Hi, I’m trying to add a CSS transition to the sub menu link color

I’m using

.dark-menu-dropdown #main-nav ul.sub-menu li a {
  color:blue !important;
  transition: color 2s ease;
}
.dark-menu-dropdown #main-nav ul.sub-menu li a:hover {
  color:red !important;
}

but the change is happening without the transition. Any idea what I’m doing wrong?
Thanks again 🙂