vue菜单横向展示

横向显示列

//横向展示需要样式修改

.el-menu--horizontal .el-menu-item {

float: left;

height: 60px;

line-height: 60px;

margin: 0;

border-bottom: 2px solid transparent;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: transparent;

color: #909399;

}

.el-menu--horizontal .el-submenu {

float: left;

}

.el-submenu__icon-arrow {

position: static;

vertical-align: middle;

margin-left: 8px;

margin-top: -3px;

}

.el-menu--horizontal .el-submenu.is-active .el-submenu__title {

height: 60px;

line-height: 60px;

border-bottom: 2px solid #409EFF;

color: #303133;

}

表