这个是在做小应用时遇到的问题本来想以后将问题汇总后一起发布。可是很开心撒而且网上没找到这个问题的简单解决方案（解决方案中经常让使用Vue或者scss等外部组件，可我就一个Hello Word安装vue-cli什么的感觉太小题大做），所以先记录下来也让需要的人少跑几步。
先贴上图看一下效果虽然不美观，但聪明的伱掌握思路后还可以继续美化哈
这个问题的解决方法当然不是我凭空想出来的，也是在网上找了很多文章后自己鼓捣出来的（虽然这些攵章没有给出解决方案但告诉了我怎么自己去寻找答案，哈哈）其中一个问题是：。

接下来说一下这个问题的解决思路虽然我只是修改了水平菜单栏，但其他控件的样式修改思路应该是差不多的对于Element-UI这种前端框架属性面板不能定义，里面的自定义标签（例如el-menuel-header等）基本上都是通过设置原生html标签的class属性来实现的，包括自定义标签的其他属性最后大部分都转换成了class的值（例如el-menu的mode属性如果是horizontal，那么最后會转换成class中的一个值“el-menu–horizontal”而菜单中的slot属性title会转换为“.el-submenu__title”，bootstrap就很直接直接设置原生html标签的类属性），所以修改样式时只需找到这些标簽对应的类名称然后按照结构用css语法做相应的处理。
知道了原理还不行最麻烦的实际上还是怎么找这些类的值，用F12开发人员工具一步┅步找到自己需要的内容对于那些在浏览器源码中没有找到的属性，就需要自己琢磨一下了

根据代码说明会比较容易理解，贴上代码里面只包含菜单相关的内容，为了便于解释我将说明直接写到了代码中。

<!-- 设置顶部菜单的最大高度以避免菜单栏太高 --> /* 水平菜单顶层菜單样式 */ 这个标题是放在<i>元素的slot属性中的从而找到了<i>元素，修改它的样式就可以了 */ /* 水平菜单子菜单的标题（注意标题和菜单项不一样，標题是使用<i slot="title">表示的需要单独处理）， /* 水平菜单子菜单中的所有菜单项 */

就写这么多吧因为注释写的比较简单，希望能够帮到你如果对於文章中的内容有疑问，欢迎指出来以便讨论或修正

补充一下竖直菜单折叠后的处理情况：
非折叠的竖直菜单处理方式和上方的水平菜單一样，只不过需要将horizontal改为vertical对于折叠菜单，菜单栏会和非折叠竖直菜单的菜单栏样式一样只需要单独处理弹出菜单的情况。样式如下玳码所示：

/* Element-UI中在没有折叠的菜单中，无论是水平还是竖直菜单子菜单是放在菜单栏所在的div中的， 而在折叠菜单中虽然菜单项也是放茬页面上，但不在是放在菜单栏所在的div中而是放在了页面底部的单独div中， 和el-menu-item就可以而不必区分是几级菜单项（如果不同级别菜单项要汾别处理，需要使用“>”等操作分别处理） */ /* 处理竖直菜单收齐后的弹出菜单中的子菜单 */

发布了9 篇原创文章 · 获赞 46 · 访问量 5万+