title: Antd horizontal sub menu "floating"
body: <p>I have a very simple antd menu which I used following their docs. However, when the submenu opens it is floating (not attached to the main menu) and it really doesn't look good.
  How do I fix this?</p>
  
  <p>This is what my code currently looks like:</p>
  
  <pre><code>export function MainMenu () {
    return (
      &lt;AntdLayout&gt;
        &lt;Menu mode='horizontal' theme='dark' style={{ position: 'fixed', zIndex: 1, width: '100%', marginBottom: 100 }}&gt;
          &lt;Menu.Item key='home'&gt;
            Home
          &lt;/Menu.Item&gt;
          &lt;SubMenu key='submenu' title='SubMenu'&gt;
              &lt;Menu.Item key='1'&gt;
                Option 1
              &lt;/Menu.Item&gt;
              &lt;Menu.Item key='2'&gt;
                Option 2
              &lt;/Menu.Item&gt;
          &lt;/SubMenu&gt;
          &lt;Menu.Item key='contact'&gt;
            Contact
          &lt;/Menu.Item&gt;
        &lt;/Menu&gt;
  &lt;/AntdLayout&gt;
    )
  }
  </code></pre>
  
  <p>Here is a screenshot of what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/ZWvIM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZWvIM.png" alt="enter image description here"></a></p>