使用el-submenu标签，点击后样式会突出一块，请问怎么设置才能不突出？

Question

<template>
  <div style="background-color: #EBEBEB;min-height:900px">
    <div style="width:100%;background-color: #636363; overflow: hidden">
            <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%">
                系统首页
            </span>
      <span class="demonstration"
            style="float:left;padding:5px;color:white;margin-left:2%;width:15%">
                <el-input
                        placeholder="请输入"
                        icon="search"
                        v-model="searchCriteria"
                        :on-icon-click="handleIconClick">
                </el-input>
            </span>
      <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
    </div>

    <div style="margin-top:5px" >
      <el-row :gutter="10">
        <el-col :xs="4" :sm="4" :md="4" :lg="4">
          <div class='side-bar'>
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    style="min-height:200px"
                    @select="handleSelect"
                    background-color="#324157"
                    text-color="#bfcbd9"
                    active-text-color="#20a0ff"
                    unique-opened
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>首页</span>
                </template>
                <el-menu-item index="1-1">
                  <i class="el-icon-document"></i>
                  <span>用户管理</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-menu"></i>数据展示
                </template>
                <el-menu-item index="2-1">
                  <i class="el-icon-menu"></i>数据展示
                </el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-menu"></i>用户管理
                </template>
                <el-menu-item index="3-1">
                  <template slot="title">
                    <i class="el-icon-menu"></i>用户查询
                  </template>
                </el-menu-item>
                <el-menu-item index="3-2">
                  <i class="el-icon-menu"></i>用户增加
                </el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-menu"></i>数据展示
                </template>
                <el-menu-item index="4-1"><i class="el-icon-menu"></i>任务列表</el-menu-item>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-menu"></i>快捷操作
                </template>
                <el-menu-item index="5-1"><i class="el-icon-menu"></i>创建页面</el-menu-item>
                <el-menu-item index="5-2"><i class="el-icon-menu"></i>拖拽功能</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </el-col>
        <el-col :xs="20" :sm="20" :md="20" :lg="20" class="content-container">
          <!--<div>-->
          <!--<div style="border: 1px solid #A6A6A6; border-radius:6px; padding:5px; margin:50px; background-color: white">-->
          <!--<el-breadcrumb separator="/">-->
          <!--<el-breadcrumb-item v-for="item in breadcrumbItems">{{item}}</el-breadcrumb-item>-->
          <!--</el-breadcrumb>-->
          <!--</div>-->
          <!--</div>-->

          <!--<div style="margin-top:5px">-->
          <div>
            <router-view></router-view>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        searchCriteria: '',
        breadcrumbItems: ['导航一'],
      }
    },
    methods: {
      handleIconClick(ev) {
        console.log(ev);
      },
      handleSelect(key, keyPath) {
        switch(key){
          case '1-1':
            console.log('Page1 导航一')
            this.$router.push('/addUser');
            this.breadcrumbItems = ['导航一']
            break;
          case '2-1':
            this.$router.push('/data_tmp')
            this.breadcrumbItems = ['导航二']
            break;
          case '3-1':
            this.$router.push('/user_list')
            this.breadcrumbItems = ['用户查询']
            break;
          case '3-2':
            this.$router.push('/user_add')
            this.breadcrumbItems = ['用户增加']
            break;
          case '4-1':
            this.$router.push('/task_list')
            this.breadcrumbItems = ['导航三']
            break;
          case '5-1':
            this.$router.push('/customContainer')
            this.breadcrumbItems = ['导航三']
            break;
          case '5-2':
            this.$router.push('/partDraggable')
            this.breadcrumbItems = ['导航三']
            break;
        }
      }
    },
  }
</script>

<style lang="scss">
  @import './assets/styles/cover.scss';
  @import './assets/styles/index.scss';
  .content-container {
    box-sizing: border-box;
    /*background: blue;*/
    padding-right: 50px;
    overflow: hidden;
  }
  .side-bar {
    overflow-y: hidden;
  }
</style>

Answer 1

你的宽度溢出了，调整一下宽度