GWT MenuBar.Resources... ignored?

I'm creating a MenuBar, and I want to have it display a little icon when there are sub-elements to be displayed. I thought I could achieve this like so:

interface ActionHeroResources extends ClientBundle, Men开发者_开发技巧uBar.Resources
{
    @Source("actionhero.css")
    public ActionHeroCSS css();

    @Override
    @Source("agw-dropdown.png")
    ImageResource menuBarSubMenuIcon();
}

private static final ActionHeroResources RESOURCES = GWT.create(ActionHeroResources.class);

MenuBar actionMenu = new MenuBar(true, RESOURCES);

public ActionHero()
{
    actionMenu.addItem("Select", aSelectMenuFullOfOptions);
}

But the menu appears with the word "Select" an no icon! I'm positive my ImageResource is working correctly because I use menuBarSubMenuIcon().getURL() from the same resource later, and my image shows up just as you'd expect. In the HTML generated by GWT, there is absolutely no distinction between the items with MenuBars as children and the items with Commands. My CSS is working fine.

Any thoughts?

Try overriding the CSS style for .gwt-MenuBar-vertical .subMenuIcon-selected, like this:

.gwt-MenuBar-vertical .subMenuIcon-selected {
    background: none;
}

I use this for my own selected items and it works great:

.gwt-MenuBar-vertical .subMenuIcon-selected {
    background: url(images/hand_pointer.png) no-repeat 0px 0px;
}

The problem was ultimately that the popup panels that form the submenus take their stylename from the parent, but append a dependent stylename. I don't know of a way to predict what that dependent stylename will be, since the original stylename is obfuscated. I worked around this problem by using the more generic .gwt-MenuBar popup stylename. This only works because I only have one style of popup menu in my program - I'm not sure what I would do if I wanted two popups to look different!

Hopefully, in later gwt releases, the MenuBar styles will come more closely from the resources passed to the menubar and make less use of dependent style names.

You can simply set a css rule for the that appears in the sub menu like this:

.subMenuIcon > img {
    /* override gwt sub menu icon */
    width: 6px !important;
    height: 11px !important;
    background: url('your-image-relative-path.png') no-repeat 0px 0px !important;
}