Unable to change li Background Color on Hover

Question

Can you please take a look at this link and let me know why I am not able to change the background color of the li on hover?

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
</ul>

Css:

.inline li{
    width:18% !important;
    background:#FFF  !important;
}
.inline li: hover{
    background:#A5A5A5  !important;
}

Answer 1

You have an extra space before hover.

.inline li:hover{
    background:#A5A5A5  !important;
}

Answer 2

The space between li and :hover is valid CSS, but not in this case. Using li :hover will apply styles when you hover over any descendant of the li. What you are using is invalid CSS. You can't have a colon between an element and a pseudo-class. So by using li:hover, you are specifiying the styles when the li is being hovered over.

I would also recommend that you not use !important, because it can cause some problems later down the road. Use more specific DOM selectors, like ul.inline li:hover.

Fiddle