NavMenu 导航菜单导航样式修改

样式修改,希望可以帮到大家。

.el-menu-demo {
	background: none;
}
.el-menu--horizontal > .el-submenu .el-submenu__title,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title,
.el-submenu__title i {
	color: #fff;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
	border-bottom: 2px solid #ff8923;
	color: #fff;
}
//鼠标悬浮时,子菜单的样式
.el-menu-item:hover {
	outline: 0 !important;
	color: #ff8923 !important;
	background: none !important;
}
.el-menu-item.is-active{
    color: #ff8923 !important;
}
//鼠标悬浮时,主菜单的样式
.el-submenu__title:focus,
.el-submenu__title:hover {
	outline: 0 !important;
	color: #fff !important;
	background: none !important;
}
.el-menu--horizontal:focus,
.el-menu--horizontal:hover {
	outline: 0 !important;
	color: #fff !important;
	background: none !important;
}
.nav-menu-son .el-menu--horizontal:hover{
	background: pink!important;
}
.el-menu {
	background-color: none !important;
}
.el-menu-item a:hover {
	background: none;
}
.el-menu--popup-bottom-start {
	margin-top: -2px;
}
.el-menu--popup {
	background: none !important;
	padding: 0 0;
}
.el-menu--horizontal .el-menu {
	background: none;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
	background-color: rgba(255, 255, 255, 0.6);
	float: none;
	height: 36px;
	line-height: 36px;
	padding: 0 22px;
	color: #2d84ee!important;
	z-index: 100;
	font-weight: 500;
}
//二次菜单悬浮样式
.el-menu--popup-bottom-start .el-menu-item:hover{
	background:  rgba(255, 137, 36, 1)!important;
	color: #fff!important;
}

你可能感兴趣的:(VUE,ElementUI,vue.js,css,elementUI)