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

NavMenu 导航菜单导航样式修改相关推荐

element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
状态输出导航栏html,css3与html5实现响应式导航菜单(导航栏)效果分享
此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单. HTML 示例中有一个导航菜单的html结构,元素用来定位导航菜单,.current表示当前活 ...
用html做一个横向导航菜单,CSS样式制作的漂亮WEB横向导航菜单
www.wfuyu.com 建站首页 Div+CSS教程 CSS布局实例 CSS2.0教程 CSS酷站欣赏提示:可修改后代码再运行!
HTML中spry菜单栏,DreamweaverCS3中用“spry菜单栏”制作纵向导航菜单.docx
Dreamweaver CS3 中用" spry 菜单栏"制作纵向导航菜单摘要:网页导航菜单是指引和方便浏览者访问所需内容的快速通道.该文介绍了Dreamweaver CS3 ...
html 顶部导航栏隐藏,js和css3智能隐藏和显示的顶部导航菜单
这是一款使用js和css3制作的智能隐藏和显示的顶部导航菜单.该顶部导航菜单在页面向下滚动时可以帧动画隐藏,在向上滚动到一定距离时优惠显示出来. 使用方法 HTML结构使用元素作为该导航菜单的HTM ...
如何在WordPress中制作导航菜单（7个功能点）
在wordpress中添加导航菜单是初级的操作,但对于新手而言依旧会遇到一些问题,接下来我们就逐一讲解. 什么是导航菜单导航菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图 ...
web html做菜单,Web元素设计之导航菜单
1. 横向导航菜单导航菜单实际上相当于一个列表,自然地,我们可以选择HTML中的列表元素ul来进行实现: HTML ↓: 首页探索观察解密关于 ul本身是一个块级元素,其中包含的列表项li同 ...
关于element-plus的Dropdown 下拉菜单属性的修改
** 关于element-plus的dropdown的下拉菜单的样式修改 ** 因为所做的界面和element-plus所提供的颜色不相搭配,所以进行了颜色的修改 1.首先是下拉框本身可以看见原本的 ...
Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...

NavMenu 导航菜单导航样式修改

NavMenu 导航菜单导航样式修改相关推荐

最新文章

热门文章