允许绝对定位的元素比父绝对定位的元素宽

我有一个小的CSS弹出菜单（从技术上讲，这是一个扩展元素）。它绝对位于相当狭窄的父元素绝对定位元素的左下方。请参见下面的第二个 h1 元素：

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 h1 element below:

<div id="controls">
   <h1>Controls 1</h1>
   <h1 id="size" class="poplinks button">
      Size
      <a href="#" class="button selected" title="small"><img src=""></a>
      <a href="#" class="button" title="medium"><img src=""></a>
      <a href="#" class="button" title="large"><img src=""></a>
   </h1>
</div>

这很简单地变成了展开菜单/弹出菜单，如下所示：

This is very simply turned into an expanding menu/flyout like so:

.poplinks:hover {
   width:auto;
}
.poplinks a {
   display:none;
}
.poplinks:hover a {
   display:inline-block;
}

问题

这将导致以下类似按钮的元素：

Problem

This results in the following button-like element:

h1 的样式为 width：48px; ，并且还有一个样式规则，将 width：auto; 悬停在 h1 元素上，因此应该能够扩大。但是，在悬停时，当我希望子菜单向右延伸（超出父级的包含框时），子菜单被迫保持不超过父级元素的宽度。

The h1 has style width:48px;, and there is also a style rule to apply width:auto; to the h1 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).

我想要什么可以看到（通过将元素移到父级外部来获得，但是我希望它保留在内部以继承样式，因此当我将菜单栏从左移到顶部时，它会自动跟随）：

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):

这可能吗？您有任何建议吗？

Is this possible? Do you have any recommendations?

亲自查看此操作在JS小提琴中。

注意：我计划在Firefox，Chrome和IE8。我正在做Firefox&中的主要样式。 Chrome以及基本完成后，将添加条件CSS以使IE正常工作并尽可能接近我。

Note: I plan for this to work in Firefox, Chrome, and IE 8. I am doing the main styling in Firefox & Chrome and when basically done, will add conditional CSS to get IE to work right and look as close as I can.

我绝对定位父菜单的原因是我正在构建一个类似于应用程序的页面来显示图像。该页面将托管在父Windows应用程序中，不需要很多识别信息：仅显示所需的图像即可。我选择使菜单绝对定位，而不是使用内联块或浮点数或其他方法将菜单列放置到位（有两个）。但是，不必一定是这种方式。如果您对替代布局或策略有任何建议，请大家注意。

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.