el-menu、折叠菜单el-submenu和子菜单el-menu-item修改背景样式颜色及悬浮样式颜色

html

<el-menu
	<!-- 依次为菜单背景颜色、字体颜色、激活时颜色 -->
	background-color="#2F4050"
	text-color="#9CB4CC"
	active-text-color="white"
	...
>
	<el-submenu>
		<el-menu-item>...</el-menu-item>
	</el-submenu>
</el-menu>
	

html中已经实现了菜单的主体样式，细节样式通过下述css实现。

css

/*主菜单样式*/
>>>.el-submenu__title{
	
}
/*主菜单悬浮样式*/
/deep/.el-submenu__title:hover {
	color:white!important;
	background: #1890FF!important;
}
/*子菜单样式*/
/deep/.el-menu-item{
	background: #283847!important;
}
/*子菜单悬浮样式*/
/deep/.el-menu-item:hover {
	color:white!important;
	background: #1890FF!important;
}