html - 在 anchor 悬停时更改 li

Question

我有一个链接列表，当我将鼠标悬停在上面时，我希望整个 li 更改背景颜色。这是一个常见的效果，但我不确定如何让它发挥作用。

#topbar ul li{
            display:inline;
            margin:0 10px;
        }
        #topbar ul li a{
            color:white;
            text-decoration: none;
        }
        #topbar ul li a:hover{
            background-color:#323232;
        }

<div id="topbar">
        <ul>
            <li>
                <a href="">About Us</a>
            </li>
            <li>
                <a href="">Services</a>
            </li>
            <li>
                <a href="">Gallery</a>
            </li>
            <li>
                <a href="" class="nav-quote-button">Get Quote</a>
            </li>
        </ul>
    </div>

目前，只有 anchor 标记会更改背景颜色，但我希望整个 li 区域都这样做。

我该怎么做？

谢谢。

Answer 1

这将完成工作:

#topbar ul li:hover {
    background-color:#323232;
}

此外，您需要将 li 更改为 display:inline-block; 而不是 display:inline;

#topbar ul li{
    display:inline-block;
    margin:0 10px;
}

演示 http://jsfiddle.net/ZA4nJ/