ElementUI :右边的子菜单出现截断(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>

​