前言
因项目需求，老板要求用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，再不行就删除元素自己写吧。。。
