基于 vue2 的 elementUI 的导航栏 menu 三级菜单显示位置问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 881 天前的主题，其中的信息可能已经有所发展或是发生改变。

需求:

对于如下的 html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>menutest</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-menu class="el-menu" mode="horizontal"> <el-submenu index="4" style="float: right; margin-right: 200px"> <template slot="title"><i class="el-icon-menu"></i></template> <el-menu-item index="4-1"> <i class="el-icon-setting"></i> 选项 1 </el-menu-item> <el-submenu index="4-2"> <template slot="title">选项 2</template> <el-menu-item index="4-2-1">选项 2.1</el-menu-item> <el-menu-item index="4-2-2">选项 2.2</el-menu-item> </el-submenu> </el-submenu> </el-menu> </div> <script> new Vue({ el: "#app", }); </script> </body> </html>

怎么设置 css 样式或者调整 el-menu 的样式, 让选项 2 的子菜单弹出的时候显示在上级菜单的左边(默认是右下角)? 我谷歌搜索了好久一直没找到解决方案.有没有了解帮忙提点下.

5 条回复 2023-06-06 21:07:04 +08:00

ccdjh

2023-06-06 15:11:47 +08:00

我遇到好多年轻人被框架绕晕的.就是一个 CSS 问题 .框架把前端搞的像编程一下. 还得理解了.框架才便利的

省略
</head>
<style>
.el-menu--popup-right-start{
background: red;
position: relative;
top:1px;
left: -420px;
}
</style>
<body>
省略

cityeys

2023-06-06 15:27:19 +08:00

一楼的方式没问题，还可以更简单，直接设置.el-menu--popup-right-start 的父级元素。

.el-menu--horizontal {
left: -220px
}

hm20062006ok

2023-06-06 15:32:16 +08:00

<el-submenu index="4-2" popper-class="popper-clazz">

<style>
.popper-clazz {
left: -210px !important;
}
</style>

unusebamboo

2023-06-06 21:06:50 +08:00

@ccdjh 嗯, 好的, 非常感谢. 对 elementUI 目前只会用, 了解不多, 我好好熟悉下. 再次感谢

unusebamboo

2023-06-06 21:07:04 +08:00

@cityeys 好的, 感谢