将鼠标悬停在li

Question

我无法通过将鼠标悬停在li上的任何位置来弄清楚如何更改右侧数字的背景颜色。我对此有点新意。有人知道我做错了什么吗？我现在只是打字，因为我在右侧收到一个红色错误框，告诉我必须添加更多详细信息。

<pre>

<style type="text/css">
ul.icon { 
    list-style-type: none;
}
ul.icon li { 
    height: 44px !important;
    padding: 6px 10px 6px 10px;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
}
ul.icon li:hover {
    background: #F0F0F0;
    border-radius: 5px;
}
ul.icon li .float_num:hover {
    background: #000000;
}
ul.icon li a {
    width: 100%;
    height: inherit;
    display: block;
}
.float_city {
    float: left;
}
.float_num {
    text-align: right;
    vertical-align: middle;
    width: 40px;
    float: right !important;
    padding: 3px 7px 3px 7px;
    margin: 0px 0px 0px 0px;
    color: #FFFFFF;
    border-radius: 10px;    
    background: blue;
}
li .float_num:hover {
    background-color: red;
}
</style>

<ul class="icon">
    <li class="mapmarker"><a href="#">Denver, CO <span class="float_num">1191</span></a></li>
</ul>

</pre>