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

Issue

I was searching about how to set co-ordinate of MenuButton's Context Menu in css and didn't find a way to achieve. I tryed do add css "top" but, this is did not worked. and after i tryed padding , this too did not worked.

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;
}

Example Picture :

so how i can do this? thank you.

Solution

You can use the -fx-translate-y CSS property:

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

Answered By - Miss Chanandler Bong
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)