JavaFX MenuButton 仅作为具有 MenuButton 功能的图形或图标

Question

I added a MenuButton and assigned an icon for its graphic. Whenever I hover over the graphic, the color changes from black to blue. The problem is, I don't need to precisely hover over the graphic in order to open the menu. If I were to click on any of the places marked with the red dots the options appear below.

I've looked around and managed to remove as many things as I could find using the following CSS :

#menubutton {
    -fx-background-color: transparent;
    -fx-background-insets: 0 0 0 0;
    -fx-border-color: transparent;
    -fx-padding: 0;
}
#menubutton > .arrow-button {
    -fx-background-color: transparent;
    -fx-padding: 0;
}
#menubutton > .arrow-button > .arrow {
    -fx-background-color: transparent;
    -fx-padding: 0;
}

But if clicking on those places stills opens the menu options, then it seems like there's still some space between the icon and the border of the button. In this example you can see the space more clearly.

Is there a way to either remove that space or give an icon the functionality of a MenuButton without the button itself?

PS The other icons work fine because they're by themselves and not as a graphic in a button.

Answer 1

You need to also turn off the padding to the label within the menu button.

#menubutton > .arrow-button,
#menubutton > .label{
    -fx-background-color: transparent;
    -fx-padding: 0;
}