title: Why doesn't this button expand to width of its content in Firefox like it does in other browsers?
body: <p>This question seems crazy long, but I wanted to clearly explain everything.</p>
  
  <h1>Desired Result</h1>
  
  <p>I have a horizontal menubar with submenus. I created it from scratch, so I am not using any existing framework. It uses a combination of buttons, anchors, and spans for semantic markup.</p>
  
  <ul>
  <li>anchors for items that go to a new page</li>
  <li>buttons for items that don't go anywhere but have submenus</li>
  <li>spans for disabled items</li>
  </ul>
  
  <p>Note: This site is for a limited number of specific users so I am not concerned about the lack of accessibility.</p>
  
  <p>Submenus should be as wide as the widest menu item that it contains. And each menu item should fill the width of the submenu so that the cursor and focus outlines display as desired.</p>
  
  <h1>The Problem</h1>
  
  <p>In Firefox, a submenu does not expand to the width of the widest item in the following scenario:</p>
  
  <ul>
  <li>submenu is absolutely positioned</li>
  <li>submenu is contained within a block that has position other than static</li>
  <li>longest menuitem is a button</li>
  </ul>
  
  <p>I've tested with Chrome, IE 8, Firefox 12, and Firefox 20. It displays as desired in Chrome and IE, but not in either version of Firefox.</p>
  
  <p>I created a scaled down version with JavaScript, images, disabled items, and many of the menu items removed. Code is below and also on <a href="http://jsfiddle.net/toxalot/se6DY/" rel="noreferrer">jsFiddle</a>. Here's a screenshot in Firefox 20.</p>
  
  <p><img src="https://i.stack.imgur.com/syolZ.png" alt="Firefox screenshot with squished menu item"><br>
  Note how the <em>Section Titles</em> item is squished. The submenu is only as wide as the <em>Page Titles</em> item (with padding). Also note how this is not a problem in the top level submenu - that menu expanded to the width of <em>Customize PDF Titles</em>.</p>
  
  <p>The <em>Section Titles</em> item is a button. If I change it to an anchor, the submenu expands as desired. If I change the button CSS to remove <code>width: 100%</code>, then the submenu expands as desired. But then, menu items that are narrower than the submenu no longer fill the width (even if I add <code>display: block</code>).</p>
  
  <p>Here's a screenshot of how the above <em>fix</em> breaks other parts of the menu.</p>
  
  <p><img src="https://i.stack.imgur.com/mF3M5.png" alt="Firefox screenshot with narrow menu item"><br>
  Note how the cursor is not a pointer when hovering outside the text. Yes, I could fix that by changing the cursor for the <code>li</code>, but the other problem is the focus outline. I want the focus outline to be around the whole menu item not just the text (which is how it works with <code>width: 100%</code>).</p>
  
  <p>I also tried playing around with <code>-moz-box-sizing</code>, but still no joy.</p>
  
  <p>As a simple workaround, for this particular case, I've just added a few <code>&amp;nbsp;</code> to <em>Page Titles</em> to make it longer. But that solution won't work when the menu is created dynamically.</p>
  
  <h1>HTML Code (<a href="http://jsfiddle.net/toxalot/se6DY/" rel="noreferrer">jsFiddle</a>)</h1>
  
  <pre><code>&lt;ul id="navAdminMenu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Companies&lt;/a&gt;&lt;/li
      &gt;&lt;li class="hasSubmenu"&gt;&lt;button type="button"&gt;Books&lt;/button&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Manage Books&lt;/a&gt;&lt;/li
              &gt;&lt;li&gt;&lt;a href="#"&gt;PDF Profiles&lt;/a&gt;&lt;/li
              &gt;&lt;li class="hasSubmenu"&gt;&lt;button type="button"&gt;Customize PDF Titles&lt;/button&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Page Titles&lt;/a&gt;&lt;/li
                      &gt;&lt;li class="hasSubmenu"&gt;&lt;button type="button"&gt;Section Titles&lt;/button&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Profile Section&lt;/a&gt;&lt;/li
                              &gt;&lt;li&gt;&lt;a href="#"&gt;Index Section&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li
      &gt;&lt;li class="hasSubmenu"&gt;&lt;button type="button"&gt;Lists&lt;/button&gt;
          &lt;ul&gt;
              &lt;li class="hasSubmenu"&gt;&lt;button type="button"&gt;Categories&lt;/button&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Manage&lt;/a&gt;&lt;/li
                      &gt;&lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li
              &gt;&lt;li&gt;&lt;a href="#"&gt;Key Contact Positions&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h1>CSS Code</h1>
  
  <pre><code>#navAdminMenu {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #efefef;
  }
  #navAdminMenu button {
      margin: 0;
      padding: 0;
      vertical-align: baseline;
      border: none;
      background-color: transparent;
      cursor: pointer;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;
  }
  #navAdminMenu button::-moz-focus-inner {
      padding: 0;
      border: none;
  }
  #navAdminMenu a {
      text-decoration: none;
  }
  #navAdminMenu li {
      display: inline-block;
      margin: 0;
      border-right: 1px solid #ccc;
  }
  #navAdminMenu li:hover {
      background-color: #4b545f;
  }
  #navAdminMenu &gt; li &gt; button, #navAdminMenu &gt; li &gt; a {
      display: inline-block;
      height: 2.3em;
      line-height: 2.6;
      padding: 0 10px;
  }
  #navAdminMenu &gt; li &gt; button, #navAdminMenu &gt; li &gt; a {
      color: #06c;
  }
  #navAdminMenu &gt; li &gt; button:focus, #navAdminMenu &gt; li &gt; a:focus {
      outline: 0; /* Firefox displays outline outside the menu box-shadow */
      box-shadow: 0 0 0 3px #06c;
  }
  #navAdminMenu &gt; li:hover &gt; button, #navAdminMenu &gt; li:hover &gt; a {
      color: #fff;
  }
  #navAdminMenu &gt; li.hasSubmenu &gt; button:after {
      content: "v";
      display: inline-block;
      width: 13px;
      margin-left: 5px;
  }
  #navAdminMenu ul {
      display: none;
      position: absolute;
      padding: 0;
      background-color: #5f6975;
  }
  #navAdminMenu li:hover &gt; ul {
      display: block;
  }
  #navAdminMenu ul &gt; li {
      display: block;
      position: relative;
      border-top: 1px solid #999;
      border-bottom: 1px solid #000;
  }
  #navAdminMenu ul &gt; li &gt; button, #navAdminMenu ul &gt; li &gt; a {
      height: 2em;
      line-height: 2;
      padding: 0 30px 0 10px;
      white-space: nowrap;
  }
  #navAdminMenu ul &gt; li &gt; button {
      width: 100%; /* full width of submenu */
      text-align: left;
  }
  #navAdminMenu ul &gt; li &gt; a {
      display: block; /* full width of submenu */
  }
  #navAdminMenu ul &gt; li &gt; button, #navAdminMenu ul &gt; li &gt; a {
      color: #fff;
  }
  #navAdminMenu ul &gt; li &gt; button:focus, #navAdminMenu ul &gt; li &gt; a:focus {
      outline: #fdcb01 solid 3px;
  }
  #navAdminMenu ul &gt; li.hasSubmenu &gt; button:after {
      content: "&gt;";
      width: 16px;
      position: absolute;
      right: 0;
  }
  #navAdminMenu ul ul {
      left: 100%;
      top: 0;
  }
  </code></pre>
  
  <h1>Question</h1>
  
  <p>Is there something simple I am missing? Or should I report this as a bug to Mozilla?</p>
  
  <p><strong>Note:</strong> I don't want to change the buttons to anchors.</p>