html - 将鼠标悬停在选项卡链接上不会填满整个选项卡

Question

您好，我在使用我网站上的选项卡时遇到问题。这是 CSS:

#menu ul {
    list-style: none;
    padding: 10px 0px 10px 0px;
    margin: 0px;
}
#menu li {
    display: inline;
    border: solid;
    border-color: #585858;
    border-width: 0px 1px 0px 0px;
    margin: 0px;
    padding: 10px;
    text-align: center;
}
#menu li a:hover {
    background: #AAA;
    padding: 10px;
}
#menu {
    color: #FFF;
    width: 1000px;
    background: #3F3F3F;
}
#menu a {
    color: #FFF;
}

但是，当我将鼠标悬停在选项卡上时，它看起来像这样(顶部栏是正常的，底部栏是当您将鼠标悬停在选项卡上时):http://i.imgur.com/DjNhkoH.png请注意灰色区域未填满方框，并且由于某种原因它会将所有内容推向右侧几个像素。

我确定有一个非常简单的修复方法，非常感谢您的帮助。

Answer 1

给 li 元素填充并悬停 a 永远不会给你想要的结果。相反，您可以做的是，从 li 元素中完全删除填充，并为 anchor 标记提供相同的填充。这覆盖了整个区域，但仍保留所需的视觉尺寸。

检查笔 here .