You can leverage the MenuButton
for that:
@Override
public void start(Stage primaryStage) {
MenuButton m = new MenuButton("Eats");
m.setPrefWidth(100);
m.setPopupSide(Side.RIGHT);
m.getItems().addAll(new MenuItem("Burger"), new MenuItem("Hot Dog"));
MenuButton m2 = new MenuButton("Drinks");
m2.setPrefWidth(100);
m2.setPopupSide(Side.RIGHT);
m2.getItems().addAll(new MenuItem("Juice"), new MenuItem("Milk"));
VBox root = new VBox();
root.getChildren().addAll(m, m2);
Scene scene = new Scene(root, 300, 250);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
where the style.css is
.menu-button {
-fx-skin: "com.sun.javafx.scene.control.skin.MenuButtonSkin";
-fx-background-color: red, green, green, lightgreen;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 0;
-fx-padding: 0.0em; /* 0 */
-fx-text-fill: -fx-text-base-color;
}
/* TODO workaround for RT-19062 */
.menu-button .label { -fx-text-fill: -fx-text-base-color; }
.menu-button:focused {
-fx-color: beige;
-fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: -1.4, 0, 1, 2;
-fx-background-radius: 0;
}
.menu-button:hover {
-fx-color: darkgreen;
}
.menu-button:armed {
-fx-color: greenyellow;
}
These selectors are partially taken and overriden from caspian.css. Change the color preferences as your needs and you can also remove the arrow of the buttons through css.
The drawback of this approach is the difficulty of making nested menu items.