CSS transition effect isn't working - html

Question

I'm quite a newbie to CSS and HTML, and have run into a problem that has me completely stumped - the transition effect I've applied to my navigation bar doesn't seem to be taking effect. I've searched for an answer to no avail, and feel ready to break something at this point. Below is my CSS for the navigation bar.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
font-size: 20px;
background-color: #333;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
transition: all 0.9s ease;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #6699cc;
}

Answer 1

You need to add the transition rules to li a - this is the element that is changing color, not the li!
See here http://jsbin.com/lufujuzuti/edit?html,css,output

Answer 2

You should replace your transition code to li a{}
So it'll be smth like this:
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
transition: all 0.9s ease;
}

Answer 3

Your CSS edited :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
font-size: 20px;
background-color: #333;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
transition: all 0.9s ease;
}
li a:hover {
background-color: #6699cc;
}