html - 最後の 2 つの要素でホバーの背景色が変わらない

Question

ホバー状態のアンカー要素の背景色を変更しようとしていますが、問題は、以下のスタイルではこれを達成できないことです。

jsfiddle

http://jsfiddle.net/fwP6g/

CSS

    .dropdown ul{
        margin:0; padding:0; float:left; width:100%; 
    }

    .dropdown ul li{
        list-style:none; float:left; width:100%;
    }

    .dropdown ul li a{
        float:left; width: 265px;  height:20px; padding:5px; 
        padding-top:10px; color:#000;  font-size:12px;  
        border-bottom:1px dotted #666;  background-color:#FFF;
    }

    .dropdown ul li a:hover{
        background-color:#F80101;  !important
    }

    .dropdown ul li:last-child a{
        border-bottom:none;
    }

    .dropdown ul li a#pink{
        background-color:#FFE8E8;
    }

html

<div class="dropdown"> 
     <ul>
            <li><a href="/orders">Orders</a></li>
            <li><a href="/favourites">Favourites</a></li>
            <li><a href="/account" style="background-color:#FFE8E8;">Account</a></li>
            <li><a href="/settings" style="background-color:#FFE8E8;">Settings</a></li>
     </ul>
</div>

私は混乱しています。なぜこれが機能しないのかわかりません。助けていただければ幸いです。

Answer 1

!importantクロージング前に行く必要があります;。

.dropdown ul li a:hover {
    background-color:#F80101 !important; 
}

jsFiddle の例

Answer 2

これを追加：

間違い：

.dropdown ul li a:hover{
        background-color:#F80101;  !important
    }

真実：

.dropdown ul li a:hover{
        background-color:#F80101 !important;  
    }

Answer 3

id="pink" を class="pink" に変更し、css でこれを hover .dropdown ul li a.pink:hover に追加します。