[FIXED] JavaFX MenuButton only as a Graphic or an Icon with the functionality of a MenuButton

Issue

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?

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

Solution

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

Answered By - Sai Dandem