Горизонтальное подменю и плавающее меню

Question

У меня очень простое antd-меню, которое я использовал, следуя их документам. Тем не менее, когда открывается подменю, оно плавает (не привязано к главному меню) и выглядит не очень хорошо. Как это исправить?

Вот так выглядит мой код:

export function MainMenu () {
  return (
    <AntdLayout>
      <Menu mode='horizontal' theme='dark' style={{ position: 'fixed', zIndex: 1, width: '100%', marginBottom: 100 }}>
        <Menu.Item key='home'>
          Home
        </Menu.Item>
        <SubMenu key='submenu' title='SubMenu'>
            <Menu.Item key='1'>
              Option 1
            </Menu.Item>
            <Menu.Item key='2'>
              Option 2
            </Menu.Item>
        </SubMenu>
        <Menu.Item key='contact'>
          Contact
        </Menu.Item>
      </Menu>
</AntdLayout>
  )
}

Вот скриншот того, как это выглядит:

Answer 1

Поскольку это не рекомендуется, потому что Ant - это система проектирования , вы можете достичь этого, установив селекторы .ant-menu-submenu > .ant-menu:

/* ./App.css */
.ant-menu-submenu > .ant-menu {
  margin-top: -5px;
}

// index.js
import { Layout, Menu } from 'antd';
import 'antd/dist/antd.css';
import './App.css';

function MainMenu() {
  return (
    <Layout>
      <Menu mode="horizontal" openKeys={['submenu']}>
        <Menu.Item key="home">Home</Menu.Item>
        <Menu.SubMenu
          key="submenu"
          title="SubMenu"
        >
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
        </Menu.SubMenu>
        <Menu.Item key="contact">Contact</Menu.Item>
      </Menu>
    </Layout>
  );
}