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

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:
create a popup element like this:
<popup ... >
<menu ... >
<menupopup ... >
<menuitem ... >
</menupopup ... >
</menu>
</popup>
assign the id of popup element to the oncontextmenu attribute or show it dynamically using onclick event of the statusbarpanel element.