elelment-ui 中 dropdown 样式无法修改问题

问题：el-dropdown-menu 的样式无法修改

框架是vue2, 用了 less，在NoteSidebar.vue中引入css组件

// NoteSidebar.vue

<style lang="less" >
@import url(../assets/css/note-sidebar);

</style>

样式都写在了note-sidebar.less 中

这是我的下拉菜单，显示如下

问题：这个下拉菜单只显示了一半的数据，还有一半没能显示

所以我决定修改它的样式，但是我发现无法修改它的样式

！important、 deep 、用全局样式都不行

HTML结构如下：

 <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
 </span>
 <el-dropdown-menu slot="dropdown" class="el-dropdown-menucss">
   <el-dropdown-item class="el-item" v-for="notebook in notebooks" :key="notebook.id"    :command="notebook.id">{{notebook.title}}</el-dropdown-item>
   <el-dropdown-item command="trash"> 回收 </el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

问题原因

注意观察页面结构，你会发现有一个ul, 没错它就是el-dropdown-menu ，而且它是在#app之外并且和#app同级的。还需要注意el-dropdown-menu本身就自带了一个它同名的class,不需要再另加class了

但是我之前都是把它放在.note-sidebar中去写，而note-sidebar又只在#app中
所以我们需要把它单独拿出来写css，并且去掉自己加的class

//note-sidebar.less

.el-dropdown-menu {
  max-height: 60vh;
  color: red ;
  overflow: auto;
}

.note-sidebar {
  position: relative;
  width: 300px;
  background-color: #eee;
  border-right: 1px solid #ccc;

基本成功

虽然字体颜色还是没变化，但是其它样式都生效了