css - コンテナからコンテンツが移動するメニューの背景を垂直にする

Question

CSS+HTMLで下の画像を実現する最良の方法を知りたいです。

私が何を望んでいるかを言葉で説明するのは難しいので、写真がより明確になると思います：

2番目と3番目の部分は実行可能ですが。最初のもの（ブルーメニュー）を達成するための最良の方法を知りたいです。ページを (メニューに基づいて) 3 つの部分に分割する場合、青の場合、div 項目はメニューの水平幅からはみ出して垂直方向に収まる必要があります。

賢者の考え？

Answer 1

働くフィドル

position:relative親と子で使用して、その要素position:absoluteから流出させたことがわかります。li

ul {
    list-style:none;
    width:906px;
    height:600px;
}
li {
    float:left;
    display:inline-block;
    border:1px solid #ccc;
    width:300px;
    height:600px;
    text-align:center;
    position:relative;
}
.selected {
    background:yellow;
}
.div {
    position:absolute;
    left:-150px;
    width:600px;
    height:80px;
    border:1px solid #000;
    background:#fff;
    z-index:2;
}
#div-1 {
    top:30px;
}
#div-2 {
    top:140px;
}
#div-3 {
    top:250px;
}

Answer 2

あなたは位置でそれを行うことができます:絶対。

.blueDiv{
    position:relative; 
}
.innerDiv{
    position:absolute; 
    top: (your choice);
    left: 50%;
    margin-left: -(innerDivSize / 2);
}

内部に要素の幅がない場合は、次の方法で要素を左右に押し込むことができます。

.innerDiv{
    position:absolute; 
    top: (your choice);
    left: 0;
    right: 0;
}

ただし、親要素がページの左端または右端にない場合にのみ機能します。