XUL: How do you create a nested menupopup inside a statusbarpanel (with statusbarpanel-menu-iconic)

Question

In XUL you can use create a status bar panel icon, similar to the ones used by Firebug and Greasemonkey, with the <statusbarpanel> tag. If you set the right class, you can throw a <menupop> inside, and then have a pop-up menu when the user clicks on the icon, like so ...

<statusbarpanel class="statusbarpanel-menu-iconic"
        src="chrome://YourExtension/content/icon.png">
    <menupopup>
        <menuitem label="whatever" oncommand="doSomething();">
        <menuitem label="whatever else" oncommand="doSomethingElse();">
    </menupopup>
</statusbarpanel>

Now, with other pop-up menus, you can nest a series of menus using the menu tag:

<statusbarpanel class="statusbarpanel-menu-iconic"
        src="chrome://YourExtension/content/icon.png">
    <menu value="Old">
        <menupopup>
            <menuitem label="whatever" oncommand="doSomething();">
            <menuitem label="whatever else" oncommand="doSomethingElse();">
        </menupopup>
    </menu>
    <menu value="New>
        <menupopup>
            <menuitem label="yet another" oncommand="doYetAnotherSomething();">
        </menupopup>
    </menu>
</statusbarpanel>

but the above code doesn't actually work, because <statusbarpanel> won't allow a <menu> child (well, it will allow it, but not create the desired effect).

So, what I was wondering was ... is there any way I can make a status bar panel icon-triggered menu with multiple layers of menu items?

* EDIT * Since I can't post this in the comment to the answer (and get syntax coloring and such), here's what finally worked for me (thanks Sathish!):

<statusbarpanel class="statusbarpanel-menu-iconic"
        src="chrome://YourExtension/content/icon.png" popup="stausBarPanelMenu">
</statusbarpanel>
<popup id="statusBarPanelMenu" position="start_before">
    <menu value="Old">
        <menupopup>
            <menuitem label="whatever" oncommand="doSomething();">
            <menuitem label="whatever else" oncommand="doSomethingElse();">
        </menupopup>
    </menu>
    <menu value="New>
        <menupopup>
            <menuitem label="yet another" oncommand="doYetAnotherSomething();">
        </menupopup>
    </menu>
</popop>

Oh, and as a side note to any XUL devs who might read this: you should really eliminate the "menupopup inside a statusbarpanel" style of pop-up. The style that answered this question is just as easy to learn/use, significantly more powerful, and it relies on the same popup mechanisms that can be used with the other XUL elements. This whole "menupopup inside a statusbarpanel" this is just a confusing, un-needed, anomaly.

Answer 1

Try this:

1. create a popup element like this: <popup ... > <menu ... > <menupopup ... > <menuitem ... > </menupopup ... > </menu> </popup>

2. assign the id of popup element to the oncontextmenu attribute or show it dynamically using onclick event of the statusbarpanel element.