element的导航栏修改其选中时颜色的问题

修改element导航栏选中时的背景色，通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。
于是……

.el-menu-item.is-active {
  background: #247bb4 !important;
}

以为完事了吗？
不不不
正常使用时效果确实达到了

但是长时间闲置页面，再回头看这个页面时会出现

哪里来的灰色？？？
鼠标点击界面任意位置，灰色立马消失……
我……
疯狂百度，没人有这种情况
但是看到别人的代码如下：

.el-menu-item.is-active {
  background-color: #247bb4 !important;
}

于是尝试着用background-color替换background
好像还真的OK了再也没出现过如上情况了
——————————————————————————————————
然后过了好几个月，发现这个现象还是存在
一次偶然的机会，被我捕获到了问题哈哈哈

莫名其妙这个时候会给当前元素加上background-color: rgb(204, 204, 204);
然后只要点击屏幕，瞬间这个值会变成background-color: rgba(0, 0, 0, 0.1);
所以，我只要给它默认设一下背景色就好了啊！！！
修改代码如下：

.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

这次是真的OK了！！！
——————————————————————————————————
心塞啊心塞，这个还是没解决
因为直接强制修改el-menu-item的背景色，会导致想要它变色的时候变不了了啊啊啊，脑壳痛。
——————————————————————————————————

直接看最终样式修改

因为需要菜单透明，于是乎这么设置以后很久没有给我蒙上一层灰了。

<el-menu router class="el-menu-vertical-demo menu-Bar" background-color="rgba(36,123,180,0.51)" text-color="#b4dbf4" active-text-color="#7BE4FF">
  <navMenu :navMenus="menuData"></navMenu>
</el-menu>

.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1);
}
.el-menu-item.is-active {
  background-color: #247bb4 !important;
}