CSS "：visited：hover" -madness

Question

私はul、リンクされたリスト要素、およびnone-linked liを持っています。私がやろうとしている何

<nav> 
    <ul> 
     <li><a href="">Home</a></li> 
     <li><a href="">Test1</a></li> 
     <li>second_level</li> 
      <ul> 
       <li><a href="">1</a></li> 
       <li><a href="">2</a></li> 
       <li><a href="">3</a></li> 
       <li><a href="">4</a></li> 
      </ul> 
     <li><a href="">Test2</a></li> 
    </ul> 
</nav> 

はをホバリング時に（リンクが訪問されたかどうかは関係ありません）これらの属性を取得し、このul内

color:#fff; background-color:#ff6600; 

をEVERYTHINGを作るです。 （。何も、そのcolor:#ff6600; background-color:#fff;を起こらないとき）

これまでのところ、私が持っている：

li, a { 
    transition:all 1000ms; -webkit-transition:all 1000ms; 
    -moz-transition:all 1000ms; -ms-transition:all 1000ms; 
    -o-transition:all 1000ms; 
} 

nav ul li:hover a:visited, nav ul li:hover, 
nav ul li a:hover a:visited, nav ul li a:hover { 
    color:#fff; background-color:#ff6600; 
} 

それは動作しますが...ちょっと...「のアニメーションが」リンクliさんに早すぎます。リンクされていないli（ "second_level"）では正常に動作します。

"アニメーション"をどのように滑らかにするかについてのヒント私は属性がお互いをキャンセルすると仮定していますが、それを見つけることはできません。

Answer 1

これは、複数の宣言のために奇妙なことがあります。

はあなたのCSSを簡素化するようにしてください：

nav ul li:hover 
{color:#fff; background-color:#ff6600;} 

はlook here、正常に動作します。