バックグラウンド
小さな 1 レベルの CSS フライアウト メニューがあります (厳密には、これは拡張要素です)。かなり狭い親の絶対配置要素の左下に絶対配置されます。以下の 2 番目のh1要素を参照してください。
<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>
これは非常に単純に、次のように拡張メニュー/フライアウトに変換されます。
.poplinks:hover {
width:auto;
}
.poplinks a {
display:none;
}
.poplinks:hover a {
display:inline-block;
}
問題
これにより、次のボタンのような要素が生成されます。
にh1は styleがあり、ホバー時に要素width:48px;に適用するスタイル ルールもあるwidth:auto;ためh1、拡大できるはずです。ただし、ホバリングすると、サブメニューは親要素の幅よりも広くならないように強制されます。これは、サブメニューを右に拡張したい場合 (親の収容ボックスの外) です。
私が見たいもの（要素を親の外側に移動することによって取得されますが、スタイルを継承するために内側に残しておきたいので、メニューバーを左から上に移動すると自動的に続きます）：
これは可能ですか？おすすめはありますか？
JS Fiddleで実際にこれを確認してください。
ブラウザ
注: これは Firefox、Chrome、および IE 8 で機能する予定です。Firefox と Chrome で主なスタイリングを行っています。基本的に完了したら、条件付き CSS を追加して IE を正しく機能させ、できるだけ近くに見えるようにします。
根拠
親メニューを絶対に配置している理由は、画像を表示するためのアプリケーションのようなページを構築しているためです。このページは親 Windows アプリケーション内でホストされ、多くの識別情報は必要ありません。必要な画像を表示するだけです。メニュー列を配置するためにインラインブロックやフロート、またはその他の方法を使用するのではなく、メニューを絶対位置に配置することにしました (2 つあります)。ただし、この方法である必要はありません。別のレイアウトや戦略について提案があれば、私はすべて耳にします。