CSSリストメニューがバックグラウンドカラーを変更していません

Question

リストからメニューを作成しようとしていて、:hoverイベントで背景色が変わっています。ドロップダウン可能なメニュー項目はclass .dropdownで、ホバーイベントで背景色を変更することはできません。

これは私のHTMLコードです：

<nav id="menubar"> 
    <ul id="menu"> 
     <li class="dropdown"><a href="#">Company</a></li> 
     <li class="selected dropdown"><a href="#">Products</a></li> 
     <li class="dropdown"><a href="#">News</a></li> 
     <li class="dropdown"><a href="#">Downloads</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

そして、これは私が作ったCSSです：

// no dropdown items 
#menubar #menu li a { 
    text-decoration: none; 
    padding: 1.2em 1.6em 1.2em 1.6em; 
    color: grey; 
    border-radius: 8px; 
    border: 1px solid white; 
} 
#menubar #menu li a:hover { 
    color: white; 
    background-color: #36C7E3; 
} 
// dropdown items 
#menubar #menu .dropdown a { 
    background:url('http://www.portalworkbook.com.br/static/admin/img/select-caret.png') no-repeat right 25px; 
} 
#menubar #menu .dropdown a:hover { 
    background-color: #36C7E3; 
    background:url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px; 
} 

これは私の問題でFIDDLEです。

解決策はありますか？それを削除しよう

Answer 1

backgroundプロパティは、このような背景のURLの前background-color
ちょうど色を追加し上書きされますので： background: #36C7E3 url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px;

は、あなただけのそれぞれについて、完全なプロパティ名を配置する必要がありdemo

Answer 2

あなたはそれが動作する背景画像を追加します。

#menubar #menu .dropdown a:hover { 
    background-color: red; 
} 

をあなたは

背景画像として背景を追加すると同時に、画像や色を使用したい場合は、次のURLを（ ''）;

Answer 3

を確認してください：

#menubar #menu li.dropdown a:hover { 
    background-color: #36C7E3; 
    background-image:url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px; 
} 

または、バックグラウンドの短縮形を使用して、すべてを1つのlinで指定することができますe：

background: #36C7E3 url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px;