title: css menu hover text color
body: <p>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 <code>transition</code> from one color to another.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://www.twitter.com"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.facebook.com"&gt;Category 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.instagram.com"&gt;Category 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.instagram.com"&gt;Category 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.instagram.com"&gt;Category 5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.instagram.com"&gt;Category 6&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've figured it out by setting <code>background-color:</code> to <code>transparent;</code> <a href="http://codepen.io/anon/pen/vNGWdQ?editors=110" rel="nofollow">CodePen here</a>; but at this point, I'm not so sure how to deal with the text colors because if I change <code>a {color: red;}</code> for example, I'll obtain a static color even on mouse over event, not a crossfading visual effect from one text color to another.</p>