Html CSS菜单悬停在Wordpress站点中

我有一个例子，我正在尝试修复悬停菜单，你可以看到它没有正确悬停，滚动是每个菜单的边框。以及最后一个菜单“接触”时，悬停不适合整个空间，或者我们可以说，它没有滚动与充分的空间时，悬停

问题的图像：

---

如何解决这个问题？

嗨，这是css的新部分

#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 90%;
margin-left: 40px;
height: 55px;
border-radius: 8px;
}

#access ul {
font-size: 21px;
list-style: none;
margin: 0 0 0 -0.5em;
padding-left: 0;
border-radius: 8px;
text-shadow: 1px 1px #000;
padding: 0;
height: 55px;
display: block;
width: 100%;
margin: 0;
background-image: url('background-image.png');
}
#access li {
float: left;
position: relative;
border-style: solid;
width: 25% !important;
background-image: url('border-left-image.png');
background-position: right;
background-repeat: no-repeat;
display: block;
}

在第601行中，这是您的问题：宽度：24%（从css中删除此行）

编辑：

添加到您的css中：

#menu-item-31 a {
    width: 100%;
}

---

你能告诉我们密码吗？看起来它有一个固定的宽度，你应该编辑你的问题来添加你的代码。由于信誉点较少，我不能添加超过2个链接。但我在上一条评论中添加了代码链接。原因是您将“悬停状态图像”应用于锚定标记，因为锚定标记嵌套在LI中，它出现在LI的顶部，覆盖了您的边界。另一个问题是，锚定标记在所有角上都有一个边界半径，而只有第一个和最后一个应该有边界半径。至于解决这个问题，您有几个选项，其中一个方法是减小锚定标记的大小，以便让边界显示出来。我建议你重新开始，用CSS编码这整件事，然后删除图片。巴克，是的，这很有效。第二个问题已经解决，但第一个问题仍然存在。悬停时，它将取代菜单的右边框。我只是想让菜单上的鼠标悬停看起来像-我真的很感谢你的时间和回应。谢谢你，伙计！

#menu-item-31 a {
    width: 100%;
}