在JavaFX2中使用CSS定位MenuButton的ContextMenu

Question

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 want to lower the Conext Menu from actual position like attached example images and if possible then up arrow too. Take a look at my code.

FXML

<MenuButton layoutX="1046.0" layoutY="38.0" mnemonicParsing="false" prefHeight="30.0" prefWidth="30.0" styleClass="notification-button">
   <graphic>
      <Pane>
         <children>
            <Circle fill="#db5344" layoutX="20.0" radius="10.0" stroke="BLACK" strokeType="OUTSIDE" strokeWidth="2.0" />
            <Label alignment="CENTER" contentDisplay="CENTER" layoutX="12.3" layoutY="-8.5" prefHeight="10.0" prefWidth="15.0" text="0" textAlignment="CENTER" />
         </children>
      </Pane>
   </graphic>
   <items>
      <MenuItem mnemonicParsing="false" text="Sample" />
   </items>
</MenuButton>

CSS

.menu-button > .arrow-button {
    -fx-padding: 0;
}
.menu-button > .arrow-button > .arrow {
    -fx-padding: 0;
}
.menu-item {
    -fx-padding: 10;
}
.menu-item .label {
    -fx-text-fill: white;
}
.menu-item:focused {
    -fx-background-color: darkgray;
}
.menu-item:focused .label {
    -fx-text-fill: blue;
}
.menu-item .label {
    -fx-text-fill: yellow;
}
.menu-item:focused .label {
    -fx-text-fill: white;
}
.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-text-fill: white;
    -fx-background-color: #006699;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
    -fx-padding: 10px;
}
.context-menu .separator {
    -fx-padding: 10;
}
.context-menu .container {
    -fx-padding: 10;
}
.context-menu .scroll-arrow {
    -fx-padding: 10;
    -fx-background-color: #006699;
}
.context-menu .scroll-arrow:hover {
    -fx-background: -fx-accent;
    -fx-background-color: #006699;
    -fx-text-fill: -fx-selection-bar-text;
}
.context-menu:show-mnemonics .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

The below attached images will help you understand my question. First image is output of my current code, the second and third image is what I want. both second and third images are for custom styling for drop down in webpages. Can I achieve the same in JavaFX2?

As you can see my fxml code, I have used MenuButton and MenuItem inside it. If you think this won't help. Please tell me other ways for getting it.

Answer 1

Well, I am sure there are lots of developers who knows how to do this. May be they didn't have time for this or unaware of my question.

By the way, I wasted almost 2 days behind this. But happy that I was able to do the solution.