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）

回答

相關問題