html - 悬停时如何使菜单项的整个宽度更改背景颜色？

Question

我希望它是这样的:

目前是这样的:

因此，如图所示，大部分背景都以白色突出显示，但左侧和右侧的一小部分是紫色的。

我目前对应菜单项的代码是:

.collapsible-menu ul 
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
 outline:none;
}

这可能是一个快速修复，但我需要第二双眼睛来查明问题。非常感谢。

所有代码都可以在这里看到:

https://codepen.io/JoyFulCoding/pen/EzXowL

Answer 1

在 CSS 中

.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;

/* add this margin left & right to make hover white full screen*/ 
margin-left: -79px; 
margin-right: -30px; 
}