css menu hover text color - html

Question

I have this menu snipped and I am interested to know if there is any possibility to edit the CSS code, in order to obtain in the end a menu text in 2 colors (initial and on mouse over) on transparent background, applying the css text transition from one color to another.
body {
font: normal 1.0em Arial, sans-serif;
background: #A8CBFF;
}
nav {
font-size: 3.0em;
line-height: 1.0em;
color: white;
width:6em;
height: 9.0em;
position:absolute;
top:0; bottom:0;
margin:auto;
left: -4.5em;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
background-color: blue;
height: 1.0em;
padding: 0.25em;
position: relative;
border-top-right-radius: 0.75em;
border-bottom-right-radius: 0.75em;
-webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
transition: transform 500ms, background-color 500ms, color 500ms;
}
nav ul li:nth-child(1) { background-color: #00aced;}
nav ul li:nth-child(2) { background-color: #3b5998;}
nav ul li:nth-child(3) { background-color: #517fa4;}
nav ul li:nth-child(4) { background-color: #007bb6;}
nav ul li:nth-child(5) { background-color: #cb2027;}
nav ul li:nth-child(6) { background-color: #ea4c89;}
nav ul li:hover {
background-color: #C1232D;
-webkit-transform: translateX(4.5em);
transform: translateX(4.5em);
}
nav ul li span {
display:block;
font-family: Arial;
position: absolute;
font-size:1em;
line-height: 1.25em;
height:1.0em;
top:0; bottom:0;
margin:auto;
right: 0.16666666666667em;
color: #F8F6FF;
}
a {
color: #FFF;
text-decoration: none;
}
<nav>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
<li>Category 6</li>
</ul>
</nav>
I've figured it out by setting background-color: to transparent; CodePen here; but at this point, I'm not so sure how to deal with the text colors because if I change a {color: red;} for example, I'll obtain a static color even on mouse over event, not a crossfading visual effect from one text color to another.

Answer 1

Putting it in the transition works. You just need to add a transition property to a selector that selects the a, not just the li. Specifically, nav ul li:hover a { color: black; }:
body {
font: normal 1.0em Arial, sans-serif;
background: #A8CBFF;
}
nav {
font-size: 3.0em;
line-height: 1.0em;
color: white;
width:6em;
height: 9.0em;
position:absolute;
top:0;
bottom:0;
margin:auto;
left: -4.5em;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
background-color: blue;
height: 1.0em;
padding: 0.25em;
position: relative;
border-top-right-radius: 0.75em;
border-bottom-right-radius: 0.75em;
-webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
transition: transform 500ms, background-color 500ms, color 500ms;
}
nav ul li:nth-child(1) {
background-color: #00aced;
}
nav ul li:nth-child(2) {
background-color: #3b5998;
}
nav ul li:nth-child(3) {
background-color: #517fa4;
}
nav ul li:nth-child(4) {
background-color: #007bb6;
}
nav ul li:nth-child(5) {
background-color: #cb2027;
}
nav ul li:nth-child(6) {
background-color: #ea4c89;
}
nav ul li:hover {
background-color: #C1232D;
-webkit-transform: translateX(4.5em);
transform: translateX(4.5em);
}
nav ul li:hover a {
transition: color, 1500ms;
color: black;
}
nav ul li span {
display:block;
font-family: Arial;
position: absolute;
font-size:1em;
line-height: 1.25em;
height:1.0em;
top:0;
bottom:0;
margin:auto;
right: 0.16666666666667em;
color: #F8F6FF;
}
a {
color: #FFF;
text-decoration: none;
}
<nav>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
<li>Category 6</li>
</ul>
</nav>
You can change the text color to whatever you want, of course.