html css定位不起作用

我正在創建一個像amazon一樣的多級大型菜單，但設計和視角不同。我面臨的問題是，一旦我將鼠標懸停在一個子菜單項上，相關菜單項的位置就不能正確顯示。如果我將鼠標懸停在另一個項目上，則定位位置比前一個位置稍低。html css定位不起作用

另外我正在使用外部js資源。請檢查小提琴中的外部資源。

我想要裏面的第二級子菜單項，並正確放置一個在另一個之上。這更深入一層。

#menu li .align_right { 
    position: relative; 
    top: 1%; 
    left: 350%; 
} 
#menu li:hover .align_right { 
    top: 1%; 
    left: 350%; 
    position: relative; 
}

現在，即使我使用絕對的相對定位，李項目沒有正確對齊。另外，我不能使用position: fixed;，因爲即使滾動一下，它也會浮動在網頁上。

爵士小提琴鏈接http://jsfiddle.net/neerajsonar/hzoyddhs/

結果全屏 - http://jsfiddle.net/neerajsonar/hzoyddhs/embedded/result/

來源

2015-05-12 neeraj.sonar

相關代碼必須張貼在問題本身 –

是的，我仍然在寫這個問題。它錯誤地張貼了。我在編輯它。 –

只要有一個快速瀏覽一下我看到你的CSS移動它離開350％。將其更改爲350px它會將子菜單保留在所需的主區域中。

#menu li:hover .align_right { 
background: #94A6CE; 
top: 1%; 
left: 350px; 
position: relative; 
}

來源

2015-05-12 12:03:50 AngularJR

謝謝你的回覆。它確實有幫助，檢查這個小提琴http://jsfiddle.net/neerajsonar/hzoyddhs/ 現在會發生的是，特定的子菜單項li顯示在其父母的相同位置。我不想那樣。你可以看到小提琴並找出它的缺陷。第二個子菜單項li顯示在前面，這很好，我不介意只要它完全隱藏了前一個。 –

您好，每個子菜單都應該在鼠標懸停和鼠標懸停時顯示和隱藏。似乎用於'amazonmenu'的jquery允許它顯示，但不會在mouseout上刪除它。先看看這個區域，讓它正常工作，然後繼續下一個問題。那小提琴鏈接仍然使用350％而不是350px。 – AngularJR

html css定位不起作用

回答

相關問題