css 菜单栏鼠标移动显示下拉

最新推荐文章于 2023-04-15 10:58:28 发布

Sam young

最新推荐文章于 2023-04-15 10:58:28 发布

阅读量651

点赞数

分类专栏：知识点 vue组件封装

本文链接：https://blog.csdn.net/young_sam/article/details/122229442

版权

css 前端 javascript

知识点同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue组件封装

6 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

 <div class="m-operation__more">
          <i class="el-icon-more" />
          <div class="m-more">
            <div class="m-more__detail">
              <div class="m-more__content">
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('customize')"
                  >
                    自定义套装
                  </el-button>
                </div>
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('addTemplate')"
                  >
                    从模板中新增
                  </el-button>
                </div>
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('customerHistory')"
                  >
                    从客户过往报价中新增
                  </el-button>
                </div>
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('customerConfig')"
                  >
                    从客户配置库新增
                  </el-button>
                </div>
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('strip')"
                  >
                    新增整框胶条
                  </el-button>
                </div>
              </div>
              <div class="m-more__content">
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('inquirySheet')"
                  >
                    从询价单新增
                  </el-button>
                </div>
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('XinAnDong')"
                  >
                    新安东技术服务函
                  </el-button>
                </div>
                <div class="m-more__item">
                  <el-button
                    class="c-btn--normal"
                    :disabled="canEdit"
                    @click="handleCreate('inquiryGoods')"
                  >
                    非标产品询价
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

.m-operation__more {
 align-self: end;
 width: 14px;
 color: #257feb;
 margin: 10px 10px 0 5px;
 position: relative;
 cursor: pointer;
}
.m-operation__more:hover .m-more {
  display: block;
}
.m-operatio__more::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -10px;
  bottom: -20px;
  left: -10px;
}

.m-more {
 display: none;
 z-index: 99;
 bottom: -178px;
 right: -50px;
}