Эффект перехода CSS не работает

Question

Я довольно новичок в CSS и HTML и столкнулся с проблемой, которая полностью меня превзошла - эффект перехода, который я применил к моей навигационной панели, кажется, не является вступление в силу. Я искал ответ безрезультатно и чувствую себя готовым что-то сломать. Ниже мой CSS для панели навигации.

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

Вы должны добавить правила перехода к li a - это элемент, который меняет цвет, не li!

Смотрите здесь http://jsbin.com/lufujuzuti/edit?html,css,output

Answer 2

Вы должны заменить код перехода Ли а {} Так что это будет чем-л так:

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

Ваш CSS отредактирован:

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; 
}