CSS水平菜單有錯誤的x位置，如何直接放在父菜單下？

我想用CSS構建一個水平下拉菜單。但子菜單顯示在網站的完整左側（當我將其設置爲position: absolute）或菜單的最左側（設置爲position: relative時）。我希望它直接出現在我懸停的菜單下方。CSS水平菜單有錯誤的x位置，如何直接放在父菜單下？

這裏是我的代碼：

/* 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; 
}

來源

2010-12-17 MrBubbles

，這是有益的，如果你能提供你有什麼演示 - http://jsfiddle.net是因爲它可以很容易地修改和測試，也這樣做的一個很好的方式。 – 2010-12-17 11:34:49

添加這裏

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

一個position: relative;。

這將建立一個containing block爲了能夠相對於它定位的東西。之後，您可以使用不同的top和left值來獲得確切的預期結果。

另外z-index對.menu ul li ul是無用的。

單獨提示：歡迎使用StackOverflow！

在未來

來源

2010-12-17 11:27:44

非常感謝！ – MrBubbles 2010-12-17 11:40:43

CSS水平菜單有錯誤的x位置，如何直接放在父菜單下？

回答

相關問題