Html 将鼠标悬停在选项卡链接上不会填充整个选项卡

你好，我的网站上的标签有问题。这是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;
}

但是，当我将鼠标悬停在选项卡上时，它看起来是这样的（顶部栏是正常的，底部栏是当您将鼠标悬停在选项卡上时）：请注意，灰色区域没有填充在框中，出于某种原因，它会将所有内容向右移动几个像素

---

我相信有一个非常简单的解决方案，非常感谢您的帮助。

一个简单的解决方案是，当用户将鼠标悬停在li上而不是a上时，更改背景

改变

#menu li a:hover {
    background: #AAA;
    padding: 10px;
}

到

---

一个简单的解决方案是当用户将鼠标悬停在li上而不是A上时更改背景

改变

#menu li a:hover {
    background: #AAA;
    padding: 10px;
}

到

---

给

li

项加上填充并悬停

a

将永远不会给你想要的结果。相反，您可以做的是从

li

元素中删除填充，并为

anchor

标记提供相同的填充。覆盖整个区域，但保留所需的视觉尺寸

---

检查钢笔。

给

li

项加上填充，然后悬停

a

将永远不会给你想要的结果。相反，您可以做的是从

li

元素中删除填充，并为

anchor

标记提供相同的填充。覆盖整个区域，但保留所需的视觉尺寸

---

看看这支笔。

我建议复制并粘贴从#菜单li到#菜单li的所有内容a：悬停，以便除了颜色变化之外，所有内容都保持一致。或者从#menu li a:hover中去掉填充物，这可能会导致问题。尽管听起来很傻，但如果你能把它放到JSFIDLE中，那么我可以为你做更多的工作。对于DHTML，你应该做一个提琴这是提琴，而不是li项的填充物，把它放到锚标记中。那就行了。我建议复制和粘贴从#menu li到#menu li a:hover的所有内容，以便除了颜色变化之外，所有内容都保持一致。或者从#menu li a:hover中去掉填充物，这可能会导致问题。尽管听起来很傻，但如果你能把它放到JSFIDLE中，那么我可以为你做更多的工作。对于DHTML，你应该做一个提琴这是提琴，而不是li项的填充物，把它放到锚标记中。这样做不会填满整个方框，只会突出显示单词。这就是我看到的你的很好，但我想链接覆盖整个盒子。您的解决方案仍然只会使实际的单词可点击，而不是整个框。这样做不会填满整个框，只会突出显示单词。这就是我看到的你的很好，但我想链接覆盖整个盒子。您的解决方案仍然只是使实际单词可点击，而不是整个框。谢谢，这就是我想要的。@Amarnath我相信您所说的是黑色区域的其余部分。如果您正确地检查了元素，则这是

菜单的背景，而不是整个
li
元素。根据询问的问题，这是@user2917393想要的答案。谢谢你，这就是我想要的。@Amarnath我相信你说的是黑色区域的其余部分。如果您正确地检查了元素，则这是
菜单的背景，而不是整个
li
元素。根据提问，这就是@user2917393所寻找的答案。