悬停在上方时，如何使菜单项的整个宽度更改背景颜色？

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; 
}

Answer 2

在CSS

.collapsible-menu {
    background-color: #4C27B3;
    border: none;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}

从代码中删除此类的填充