title: Allow absolutely positioned element to be wider than parent absolutely positioned element
body: <h2>Background</h2>
  
  <p>I have a small one-level CSS flyout menu (well, technically it's an expanding element). It is absolutely positioned at the bottom left of a parent absolutely-positioned element that is fairly narrow. See the second <code>h1</code> element below:</p>
  
  <pre><code>&lt;div id="controls"&gt;
     &lt;h1&gt;Controls 1&lt;/h1&gt;
     &lt;h1 id="size" class="poplinks button"&gt;
        Size
        &lt;a href="#" class="button selected" title="small"&gt;&lt;img src=""&gt;&lt;/a&gt;
        &lt;a href="#" class="button" title="medium"&gt;&lt;img src=""&gt;&lt;/a&gt;
        &lt;a href="#" class="button" title="large"&gt;&lt;img src=""&gt;&lt;/a&gt;
     &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is very simply turned into an expanding menu/flyout like so:</p>
  
  <pre><code>.poplinks:hover {
     width:auto;
  }
  .poplinks a {
     display:none;
  }
  .poplinks:hover a {
     display:inline-block;
  }
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>This results in the following button-like element:</p>
  
  <p><img src="https://i.stack.imgur.com/UdKWs.png" alt="button"></p>
  
  <p>The <code>h1</code> has style <code>width:48px;</code>, and there is also a style rule to apply <code>width:auto;</code> to the <code>h1</code> element upon hover, so it should be able to widen. However, upon hovering, the submenu is being forced to stay no wider than the parent element's width, when I'd like it to extend to the right (out of the parent's containing box).</p>
  
  <p><img src="https://i.stack.imgur.com/e2UHs.png" alt="vertical"></p>
  
  <p>What I want to see (obtained by moving the element outside the parent, but I would like it to remain inside for inheriting styling and so when I move the menu bar from the left to the top, it follows automatically):</p>
  
  <p><img src="https://i.stack.imgur.com/gpxxm.png" alt="enter image description here"></p>
  
  <p>Is this possible? Do you have any recommendations?</p>
  
  <p>See this in action for yourself <a href="http://jsfiddle.net/ErikE/VaWeK/" rel="noreferrer">in a JS Fiddle</a>.</p>
  
  <h2>Browsers</h2>
  
  <p>Note: I plan for this to work in Firefox, Chrome, and IE 8. I am doing the main styling in Firefox &amp; Chrome and when basically done, will add conditional CSS to get IE to work right and look as close as I can.</p>
  
  <h2>Rationale</h2>
  
  <p>The reason I am positioning the parent menu absolutely is that I'm building an application-like page for displaying images. The page will be hosted within a parent Windows application and doesn't need a lot of identifying information: just to display the desired images. I chose to make the menu absolutely positioned rather than using inline-block or floats or some other method to get my menu columns into place (there are two). However, it doesn't have to be this way. If you have a suggestion for an alternate layout or strategy, I am all ears.</p>