我如何在 JavaFX 中使用 css 分隔 MenuButton 的 ContextMenu

How i can MenuButton's ContextMenu separated using css in JavaFX

我在搜索如何在 css 中设置 MenuButton 的上下文菜单的坐标,但没有找到实现的方法。我尝试添加 css "top" 但是,这没有用。在我尝试填充之后,这也没有用。

CSS

.menu-button {
    -fx-background-color: #8400d4;
}

.root {
    -fx-background-color: #ba5555;
    -fx-padding: 10;
}

.context-menu {
    -fx-background-color: #006699;
    -fx-text-fill: white;
    -fx-padding: 5em 0 0 0 ;
    top: 5em;
}

.menu-item .label {
    -fx-text-fill: #11534b;
}

.menu-item:focused .label {
    -fx-text-fill: white;
}


示例图片:

那我该怎么做呢?谢谢。

您可以使用 -fx-translate-y CSS 属性:

.menu-button:openvertically .context-menu {
    -fx-translate-y: 20;
}