html - ネストされた ul は、親 li の下に絶対配置されます

Question

ここにhtml + cssがあります：http://jsfiddle.net/xgXXN/

orange(親 li) が OVER green(入れ子になった ul)になりたい。緑の ul は絶対に配置する必要があります。親の li を引き伸ばしたくないからです。

私はこれに対する解決策を見つけることができません:(。可能であれば、HTMLではなくcssの変更だけが最善です。

Answer 1

あなたが抱えている問題は、 を に適用してから、この li の子リストにも適用しているz-indexためです。li

position:relative代わりにとz-indexをアンカーに設定してみてください。

http://jsfiddle.net/N62x8/

Answer 2

これがあなたが探しているものであることを願っています：

ul.main-menu > li > ul {
    position:absolute;
    padding-top: 5px;
}