title: How to make a drop-down menu appear exactly below the bar in Material-UI?
body: <p>I created a drop-down menu by using Material-UI, and I found one thing annoying: I want to let my drop-down menu appear under the bar when I click it, but every time it just covers the bar (as the image below)</p>
  <p><a href="https://i.stack.imgur.com/1Y8CL.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/1Y8CL.jpg" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/emf87.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/emf87.jpg" alt="enter image description here" /></a></p>
  <p>Is there any way I can do to let the drop-down menu appear below the bar? (not covering the <code>Your order</code> label and the number)</p>
  <p>My codes are as below: I try to modify the <code>anchorOrigin</code> property and <code>transformOrigin</code> property but it didn't work.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Menu 
    id=&quot;order-menu&quot; 
    anchorEl={anchorEl} 
    keepMounted 
    open={Boolean(anchorEl)}
    onClose={() =&gt; setAnchorEl(null)} 
    elevation={20} 
    getContentAnchorEl={null}
    anchorOrigin={{ vertical: &quot;bottom&quot;, horizontal: &quot;center&quot;, }} 
    transformOrigin={{ vertical: -100, horizontal: 150, }} &gt;        
  </code></pre>
  <p>I will really appreciate your help!</p>