當盤旋時，如何使菜單項的整個寬度改變背景顏色？

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

在代碼中從此類中刪除填充