element-ui 修改导航菜单样式

前言

因项目需求，老板要求用element-ui快速搭建一个官网出来。根据 ui 给出的设计稿，有许多组件的默认样式需要修改。以下是自己的最终结构和样式。

HTML部分

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <div class="show">产品展示</div>
          </template>
          <div class="menu-item">
            <ul>
              <li>下拉菜单1</li>
              <li>下拉菜单2</li>
            </ul>
          </div>
        </el-submenu>
        <el-menu-item index="3" >商业合作</el-menu-item>
        <el-menu-item index="4">新闻中心</el-menu-item>
        <el-menu-item index="5">关于我们</el-menu-item>
      </el-menu>

因为默认的下拉菜单无法修改样式（也可能我太菜，找不到在哪里修改），但是ui希望是一个宽屏的下拉菜单，就删除了原有的结构，自己放了一个li标签上去。

css部分

<style>  //一定要删除 scoped 不然样式可能无法覆盖
  [class*=" el-icon-"], [class^=el-icon-] {  //删除了导航菜单上的小箭头
    display: none !important;
  }
</style>

大部分的样式都可以通过查看样式的类名进行覆盖，覆盖不了就增加自己所写的类型的权重，实在不行就！important，再不行就删除元素自己写吧。。。