如何使下拉菜單塊在父項塊下方居中對齊？

Question

我一直在嘗試編輯下拉菜單，以使子項位於父項下方。 我終於實現了居中，只是發現每次將鼠標懸停在父項上以顯示下拉菜單時，菜單的其余部分都落在了下拉菜單的底部。

這是到示例的鏈接，它在一側具有所有編碼。 預先感謝您的幫助！ 我只是從CSS和HTML開始，無論我觀看和閱讀了多少視頻和教程，我似乎都無法正確完成它:(

https://www.w3schools.com/code/tryit.asp?filename=FEEMWLIFAMAO

Answer 1

嘗試添加vertical-align: top; 到您的.dropdown CSS，如下所示：

CSS

.dropdown {
    vertical-align: top;
}

另外請注意，我將刪除.dropdown-content的寬度，而是將寬度放在.dropdown ，以確保它們的寬度相同，並且懸停時水平位置沒有變化。 另一個解決方案是將下拉列表置於絕對位置； 並將它們相對於鏈接定位。 但是題外話:)

Answer 2

您可以將dropdown-content的位置設置為absolute 。 要使下拉列表居中，您必須將其相對於父級的寬度放置。 您的.dropdown:hover .dropdown-content { ：

display: block;
position: absolute;
left: calc((100% - 150px)/2);
width: 150px;
text-align: center;

進一步解釋該位置： 100%是指您父母的寬度。 以此與您指定為下拉內容width的150px的差值。 由於您希望框位於菜單按鈕下方的中心位置，因此必須在左右兩側之間划分此差異，因此，每側的填充為(100% - 150px) / 2 。

Answer 3

您要相對於所述父級定位的父元素和子元素都具有以下position: relative屬性應用於其樣式，這對於您似乎想要實現的結果是不合適的。

閱讀css position屬性及其值。

說明 ：您的子元素正顯示為一個block ，根據定義，該子元素relative對於其父元素定位時獨自占據了一個水平空間，因此將其余的其余相鄰導航元素推到該父元素下。

解決方案 ：您似乎要實現的導航效果通常是通過相對於將其出現在懸停的導航元素（其父元素）相對於絕對定位絕對導航來實現的。 這樣，子導航不會影響將元素分層放置在html代碼中的元素的位置。

CSS ：

.dropdown:hover .dropdown-content {
    position: absolute;
    display: block;
    width: 150px;
    text-align: center;
    //To position the element:
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}