可以将子菜单位置移动到屏幕顶部.我正在使用新的菜单组件.哪种方式声明它就是使用它,你所要做的就是写<Menu mode= {mode} theme={theme} items={items}/>.

Submenu position on default: default sub menu position

And this is my expected condition: enter image description here

蓝线是菜单,红线是子菜单.我以前的做法是创建一个新菜单并将其放置在屏幕顶部

推荐答案

您始终可以覆盖ant design css样式来实现这一点.子菜单项通常为ul&;li对.要在一行中显示li个项目,我们只需要-

ul li{
  display: inline;
}

我们可以将同样的方法应用于ant design菜单项&;一些调整-

.ant-menu-vertical.ant-menu-sub > .ant-menu-item {
  display: inline;
}

.ant-menu-submenu-popup {
  top: 0px !important;
  right: 5% !important;
  left: auto !important;
  width: 400px;
}

Edit Vertical menu - antd@4.21.0 (forked)

输出

antd design menu

Css相关问答推荐

容器内的中心固定元件

Vue3日期 Select 器:禁用向左和向右箭头

Primeng Angular更改p-dialog背景 colored颜色

此css Select 器的总体特性是什么?按钮:不是(#mainBtn,.cta)

如何使用遮罩创建手绘SVG动画

这个 CSS :is() Select 器没有像我想象的那样工作

为什么align-content:start应用于单行项目?

我想在视频上使用混合混合模式的 svg

CSS Select 器在 rvest 中找到,在 RSelenium 中找不到

适合剩余高度

你可以在 CSS 中扩展实体(entity)吗?

在 中制作等宽的列

如何设置表格单元格的最大高度?

在 CSS 或 JavaScript 中反转图像的 colored颜色

谷歌浏览器两种元素样式的区别

我应该如何组织我的 CSS 文件的内容?

Sass 无效的 CSS 错误:预期的表达式

弹性框中的边距折叠

CSS 块格式化上下文是如何工作的?

CSS 边距和填充速记属性顺序的助记符