ElementUI：右侧子菜单出现截断（CSS）

我需要导航栏中的右上角菜单。但在鼠标悬停时，子菜单会在窗口上方截断。ElementUI：右侧子菜单出现截断（CSS）

如何使其出现，以便子菜单的右侧靠近窗口边界？

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>

来源

2017-10-17 Jeff

您可以更改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>

来源

2017-10-17 15:05:26 sol

ElementUI：右侧子菜单出现截断（CSS）

回答

相关问题