CSS Horizo​​ntal MenuのX位置が間違っています。親メニューのすぐ下に配置する方法は？

Question

CSSを使って水平ドロップダウンメニューを作成しようとしています。しかし、サブメニューは、サイトの左端（position: absoluteに設定）またはメニューの左端（position: relativeに設定した場合）のいずれかに表示されます。私はそれを私が上に置くメニューの真下に現れるようにしたい。

/* div für Menü */ 
.menu{ 
height: 35px; 
float: left; 
padding: 0px; 
margin: 0px; 
outline: 1px solid grey; 
background-color: #f6f6f6; 
font-size:100%; 
} 

/* UL Menü */ 
.menu ul{ 
list-style: none; 
margin: 0px; 
padding: 0px; 
float: left; 
height: 100%; 
background-color: #f6f6f6; 
} 

/* Untermenü anzeigen bei Mouseover */ 
.menu ul li:hover ul{ 
display: block; 
} 

/* Hintergrund ändern bei Mouseover */ 
.menu ul li:hover{ 
background-color: #005ea2; 
} 


/* Menü LI */ 
.menu ul li{ 
display: inline; 
height: 35px; 
padding-left: 5px; 
padding-right: 5px; 
padding-top: 9px; 
padding-bottom: 9px; 
margin: 0; 
position: relative; 
border-right: 1px dashed gray; 
} 

/* Letzter Eintrag ohne Rand */ 
.menu li:last-child{ 
border: none; 
} 


.menu a{ 
line-height: 250%; 
color: #333333; 
text-decoration: none; 
height: 100%; 
margin: 0px; 
} 


/* UL Untermenü */ 
.menu ul li ul{ 
display: none; 
width: 200px; 
padding: 0px; 
margin: 0; 
background-color: #f6f6f6; 
outline: 1px solid gray; 
position: absolute; 
z-index: 200; 
} 


/* LI Untermenü */ 
.menu ul li ul li{ 
height: 35px; 
display: block; 
line-height: 100%; 
padding: 0px; 
border: none; 
background-color: #f6f6f6; 
position: relative; 
} 

Answer 1

がここ

.menu ul li:hover{ 
    background-color: #005ea2; 
} 

position: relative;を追加します。

は、ここに私のコードです。

これは、それに対して相対的なものを配置できるように、containing blockを確立します。その後、異なるtopとleftの値を使って正確な結果を得ることができます。

.menu ul li ulのz-indexも役に立たない。

別途メモ：StackOverflowへようこそ！