title: How to create a button with dropdown effect using xul?
body: <p>I have to create an extension for firefox which has a dropdown menu . The look of the button is similar to firebug.Here is the code:<br/></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;?xml-stylesheet href="chrome://sendtoie/skin/overlay.css" type="text/css"?&gt;
  &lt;!DOCTYPE overlay SYSTEM "chrome://sendtoie/locale/sendtoie.dtd"&gt;
  &lt;overlay id="sendtoie-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  &lt;script type="application/x-javascript" src="overlay.js"/&gt;
  
  
  &lt;toolbarpalette id="BrowserToolbarPalette"&gt;
  &lt;menulist id="sendtoie-toolbar-button"&gt;
  &lt;menupopup&gt;
  &lt;menuitem label="check"  oncommand="ButtonCommand();"/&gt;
  &lt;menuitem label="list1"  oncommand="com2();" /&gt;
  &lt;/menupopup&gt;
  &lt;/menulist&gt;
  &lt;/toolbarpalette&gt;
  
  &lt;/overlay&gt;  
  </code></pre>
  
  <p>This code create a dropdown menu with a text and icon, but when I right click on the firefox toolbar->go to Customize -> Select "Only icons" in "Show"option, the text "check" remains and also I cannot drag this extension to the "Customize" drop box.
  How can I get a behaviour similar to Firebug extension?</p>