CSS:在 悬停时更改背景，颜色未填充空间

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 元素的边框半径值。