CSS：在 <li> 悬停时更改背景，颜色不填充空间

Question

我在让这个代码播放器看起来正确时遇到问题：

http://invigorateme.net/viperbox.html

当我将鼠标悬停在一个列表项上时（列表项是顶部的四个选项卡），背景会发生变化，但不会填充两侧的空间。我试图从另一个源代码中学习，但我无法完全正确地进行调整，并且仍然遇到问题。

问题：我怎样才能使当您将鼠标悬停在列表项上时，背景会发生变化并适合背景？

如果您访问我的网站链接，当您将鼠标悬停在其中一个元素上时，您就会明白我的意思。它只是改变颜色，但不像我预期的那样。

这是它背后的相关CSS，如果它很可怕，请告诉我，我可以做得更好，我还在学习：

    #codetabs{
        width: 197px;
        height: 30px;
        position: relative;
        top: 8px;
        background-color: white;
        border: 2px solid #B7B7B7;
        border-radius: 10px;
        margin: 0px auto;
        padding: 0;
        }

    #codetabs ul{
        height: 50px;
        position: relative;
        margin: 0px auto;
        padding-left: 5px;
        }

    #codetabs li{
        text-align: center;
        float: left;
        height: 23px;
        list-style: none;
        margin: 0px;
        padding: 7px 5px 0px 5px;
        border-right: 2px solid #B7B7B7;
        }

    #codetabs li:hover{
        background-color: grey;
        }

如果有人认为我可能遗漏了任何重要的代码或信息，也请告诉我。我不认为 HTML 是必要的。

Answer 1

基本上，您的问题是您的列表项都是包含在药丸形框（id="codetabs"）中的矩形。如果您希望背景颜色填充每个按钮，您将需要使用一些伪类（:first-child 和:last-child）来指定第一个和最后一个 li 项目的边框半径值。

Answer 2

这是工作的 CSS：

#codetabs{
    width: 197px;
    height: 30px;
    position: relative;
    top: 8px;
    background-color: white;
    margin: 0 auto;
    padding: 0;
}

#codetabs ul{
    height: 50px;
    position: relative;
    margin: 0 auto;
    padding-left: 5px;
}

#codetabs li{
    text-align: center;
    float: left;
    height: 23px;
    list-style: none;
    margin: 0;
    padding: 7px 5px 0px 5px;
    border-width: 2px 2px 2px 0;
    border-color: #B7B7B7;
    border-style: solid;
}

#codetabs ul :first-child {
    border-radius: 10px 0 0 10px;
    border-left-width: 2px;
}
#codetabs ul :last-child {
    border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
    background-color: grey;
}

http://jsfiddle.net/d09xgfzc/1/