Antd水平子菜单“浮动”

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 is a design system的不建议，您可以通过定位.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>
  );
}