html - 元素界面 : right submenu appears truncated (CSS)

Question

我需要在导航栏中右上角的菜单。但是在鼠标悬停时，子菜单会在窗口上方被截断。

如何使子菜单的右边紧挨着窗口边框出现？

new Vue({
    el: '#app'
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>

<div id="app">
    <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right;">
            <template slot="title"><i class="el-icon-menu"></i></template>
            <el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
            <el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
        </el-submenu>
    </el-menu>
</div>

Answer 1

您可以在 css 中更改菜单的位置属性。重置 left 值，并添加 right: 0

new Vue({
    el: '#app'
    });

.el-menu--horizontal .el-submenu > .el-menu {
  left: initial !important;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>

<div id="app">
    <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right;">
            <template slot="title"><i class="el-icon-menu"></i></template>
            <el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
            <el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
        </el-submenu>
    </el-menu>
</div>