How would I apply a transition to a navigation element? - html

Question

I'm basically trying to add an animation to my navigation so when a user hovers over the links the text color fades in blue, and then fades back out to black after. I've read up on the transition property and watched a few tutorials on Youtube but I can't get it to work when I apply it to my own navigation bar.
Below is a link to my Codepen, if anybody could shed some light on the problem I'd be really appreciative..
Thanks
HTML:
<!-- header starts here -->
<header>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Service</li>
</ul>
</nav>
</header>
http://codepen.io/Clarkpen/pen/razMWB

Answer 1

Try here:
http://codepen.io/anon/pen/myMrRq
I included a transition on the anchor:
nav ul li a {
transition:all 400ms ease-in;
}
Note it is good practice to add the vendor prefixes:
nav ul li a {
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 1400ms ease-in-out;
-o-transition: all 400s ease-in-out;
transition: all 400ms ease-in-out;
}
EDIT
I have edited your codepen here to only add the transition to the navigation links:
http://codepen.io/anon/pen/RNZGpL

Answer 2

nav ul{margin:0px;padding:0px;}
nav ul li{float:left;list-style:none;}
nav ul li a{text-decoration:none; padding:15px; color:#666; text-transform:uppercase;transition:ease-in 0.5s;-webkit-transition:ease-in 0.5s;-ms-transition:ease-in 0.5s;-moz-transition:ease-in 0.5s;}
nav ul li a:hover{background:#F00; color:#FFF;}
<nav>
<ul>
<li>Home</li>
<li>About US</li>
<li>Products</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
</nav>
Demo