CSS下拉菜單垂直對齊

我有一個下拉菜單，在https://admin.vybenetworks.com/vybe/dropdown/這工作正常，除了一件事。子菜單對齊到導航的頂部，而不是它所屬的菜單項。例如，在「結算」下，有一個名爲「報告」的子菜單，其中有一個名爲「銷售報告」的項目。子菜單顯示在「定期結算」項目附近，而不是「報告」旁邊。CSS下拉菜單垂直對齊

我試圖尋找這個問題，但很少有點擊是關於這個問題。我認爲包含元素（LI）是「位置：相對」，子菜單（UL）是「位置：絕對」，但它始終將其與父UL相對放置。

感謝您的任何提示。

來源

2015-06-02 D' Arcy

更換top:30px僅僅是明確的，在你的國家的例子在'賬單'下你可以找到'報告' - 這應該是一個子菜單，但它不是 - 在'報告'下你應該找到'銷售報告'。我很瞭解你嗎？ – AGE

這是正確的。「主」菜單是包含「帳單」的頂部菜單。將鼠標懸停在其上方會出現一個包含「報告」作爲最後一項的子菜單。將鼠標懸停在一個子菜單上，顯示一個項目「銷售報告」。問題是這最後一個出現在頂部，它應該在「報告」旁邊，以便您可以將其選中並選擇它。 –

在您的Vybe.css文件的第286行中，您的導航欄中有一個'top'屬性，該屬性當前設置爲30px，請將其更改爲252px，並讓我知道您認爲我所說的 – AGE

在你的Vybe.css文件的第286px行，你有一個像這樣的元素：nav ul ul ul。將此元素的屬性頂部更改爲：

nav ul ul ul { 
    /* other code here, don't copy this comment */ 
    top: 252px; 
    /* other code there, don't copy this comment */ 
}

這會使子菜單元素向下滑動到相應的父級旁邊。你可以修改你認爲合適的，但我認爲252px是現貨。

讓我知道，如果這工作/不適合你。

來源

2015-06-02 20:08:26 AGE

，「不」。它可能會把那個菜單放在我想要的地方，但我真的想要一個通用的解決方案。我不想微觀管理我自己的網頁。 –

我明白了，我在離開後2分鐘內爲我的晚上通勤回家寫了我的解決方案。我明天會給你一個更完整的解決方案，除非別人可以幫助你......對於延誤抱歉。請確保upvote /接受答案，如果你發現任何有用的:) – AGE

在你的CSS文件Vybe.css，更新後的事情，

NAV UL UL LI { 
    border: none; 
    float: left; 
    position: relative; 
    width: 100%; 
} 
NAV UL UL UL { 
    left: 105%; 
    top: 0; 
    border-style: none; 
    width: 195px; 
    position: absolute; 
}

float:none與float:left更換，left:100%替換105%與top:0

來源

2015-06-02 20:16:39 dsaket

是的！完善。現在我只需要弄清楚它爲什麼起作用。我必須承認，浮標有時會讓我困惑。我瞭解左側和頂部的調整。他們很明顯，一旦浮動：左側被添加，但爲什麼這個工作？我甚至嘗試過float：正確的，它也起作用。 –

'float'標籤可用於創建整個網頁佈局。浮動元素仍然是網頁流的一部分。在你的情況下，當你使用'float：none'時，'LI'元素不會在佈局中獲得它們的空間，結果子子'UL'相對於主'UL'而不是' LI'元素。 – dsaket

CSS下拉菜單垂直對齊

回答

相關問題