title: ElementUI : right submenu appears truncated (CSS)
body: <p>I need a top right menu in the nav bar. But on mouseover, the sub-menu appears truncated above the window. </p>
  
  <p>How to make it appear so that the right of the submenu is next to the window border ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
      el: '#app'
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
      &lt;el-menu class="el-menu" mode="horizontal"&gt;
          &lt;el-submenu index="4" style="float: right;"&gt;
              &lt;template slot="title"&gt;&lt;i class="el-icon-menu"&gt;&lt;/i&gt;&lt;/template&gt;
              &lt;el-menu-item index="4-1"&gt;&lt;i class="el-icon-setting"&gt;&lt;/i&gt; Settings&lt;/el-menu-item&gt;
              &lt;el-menu-item index="4-2"&gt;&lt;i class="el-icon-information"&gt;&lt;/i&gt; About&lt;/el-menu-item&gt;
              &lt;el-menu-item index="4-3"&gt;&lt;i class="el-icon-circle-close"&gt;&lt;/i&gt; Logout&lt;/el-menu-item&gt;
          &lt;/el-submenu&gt;
      &lt;/el-menu&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>