水平展示：

外面包个div，再设置属性：
代码示例：

  .home-header-menu .el-menu--horizontal>.el-menu-item {
    height: 50px;
    line-height: 50px;
  }
  .home-header-menu .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 50px;
    line-height: 50px;
  }

<!-- 水平展示 -->
          <div class="homeHeader-menus-bg" style="margin-top:0px;">
            <el-menu  router class="el-menu-demo" background-color="#0f3365" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="handleSelect">
              <el-submenu background-color="#545c64" text-color="#ffffff" active-text-color="#409EFF" :index="index + ''"
                        v-for="(item, index) in routes" :key="index">
                        <template slot="title">
                          <i :class="item.iconcls" style="margin-right:10px;color:#0f3365"></i>
                          <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item :index="children.path" v-for="(children, indexj) in item.children" :key="indexj">
                          {{ children.name }}
                        </el-menu-item>
              </el-submenu>
            </el-menu>
          </div>

效果：