CSS list menu is not changing background-color

Question

I'm trying to create menu from list and on :hover event changing background-color. Items in menu that are able to dropdown have a class .dropdown and I cannot make them to change background-color on hover event.

This is my HTML code:

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

And this is CSS I made:

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

This is FIDDLE with my issue.

Is there any solution?

Answer 1

Because background property overrides background-color
Just add the color before the background url like this: background: #36C7E3 url('https://doc.owncloud.org/server/8.0/developer_manual/_images/caret-dark.png') no-repeat right 25px;

Check the demo

Answer 2

You just need to put the full property name for each:

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

Or, you can use the background shorthand and specify it all in one line:

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

Answer 3

You add background image try to remove it then it will work:

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

If you want to use image and color at the same time add the background as

background-image: url('');