css menu hover text color

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><a href="http://www.twitter.com">Category 1</a></li>
    <li><a href="http://www.facebook.com">Category 2</a></li>
    <li><a href="http://www.instagram.com">Category 3</a></li>
    <li><a href="http://www.instagram.com">Category 4</a></li>
    <li><a href="http://www.instagram.com">Category 5</a></li>
    <li><a href="http://www.instagram.com">Category 6</a></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><a href="http://www.twitter.com">Category 1</a></li>
        <li><a href="http://www.facebook.com">Category 2</a></li>
        <li><a href="http://www.instagram.com">Category 3</a></li>
        <li><a href="http://www.instagram.com">Category 4</a></li>
        <li><a href="http://www.instagram.com">Category 5</a></li>
        <li><a href="http://www.instagram.com">Category 6</a></li>
    </ul>
</nav>

You can change the text color to whatever you want, of course.