如何正確定位我的子下拉菜單？

我正在創建2層下拉菜單和子菜單，並且我遇到了定位問題，相對或絕對問題和/或浮動問題。我玩過絕對的遊戲，空間/差距消失了，但是我的子菜單不會在懸浮物旁邊飛出，只有第一個。我嘗試了親戚和浮動都會產生不需要的間隙，但是子菜單會按照我的意願飛出兜帽項目旁邊。以下是我認爲問題出在哪裏的代碼。 請注意，我創建了一個JSFIDDLE，因此您可以看到工作代碼示例：如何正確定位我的子下拉菜單？

下面是具有HTML和CSS的JSFIDDLE。我把那些有差距的代碼，但是有正確的飛出定位。如果我需要更清楚地澄清事情，請告訴我，我會盡力。

混亂的代碼 - 我認爲

.sub-navigation-content { 
    position: relative; 
    margin: 0 0 0 150px; 
    top: -10px; 
    width: 180px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    z-index: 999; 
    visibility: hidden; 
    box-shadow: 0 5px 10px 0 #999; 
}

下面是什麼，我希望它看起來像屏幕截圖：

正確看着飛出去，但不正確的飛出位置：

enter image description here

不正確的期待飛出，但正確飛出位置：

enter image description here

預先感謝在看看:)

來源

2013-06-02 Mike

所以...你可以使用絕對位置，但你需要刪除top: -10px;。

的子導航內容最後一類：

.sub-navigation-content { 
    position: absolute; 
    margin: 0 0 0 150px; 
    width: 180px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    z-index: 999; 
    visibility: hidden; 
    box-shadow: 0 5px 10px 0 #999; 
}

我認爲它的工作好。您可以根據需要將跳出列表移動到最大範圍，例如：

.sub-navigation-content { 
    position: absolute; 
    margin: -35px 0 0 150px; 
    width: 180px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    z-index: 999; 
    visibility: hidden; 
    box-shadow: 0 5px 10px 0 #999; 
}

來源

2013-06-02 17:19:30

我一直在研究這個問題一段時間，我不能相信這是一樣簡單，刪除頂部和調整餘量非常好的工作，並感謝你:) – Mike

只要給您的.sub-navigation-content類的絕對定位，而不是相對的。

.sub-navigation-content { 
    position: absolute; 
}

你肯定也會調整頂部至少有一個值0。

來源

2013-06-02 17:08:07 pzin

感謝您的回答，但我已經嘗試過，發生的是飛出菜單不會飛 - 在懸停物品旁邊。所有飛出的菜單保持在菜單頂部的一個位置:(查看你的建議看起來像什麼http://jsfiddle.net/rVec3/2/ – Mike

是的，你需要刪除頂部，如果你有它的價值，所有parnt列表的飛出將保持在頂部 –

如何正確定位我的子下拉菜單？

回答

相關問題