CSS樣式下拉菜單/右子菜單

Question

我想用HTML/CSS製作下拉菜單。其實，這是問題的菜單。將鼠標懸停在導航欄項目上會觸發某些項目上的下拉菜單，然後將鼠標懸停在此子菜單上的項目上方，則會顯示另一個子菜單，位於該項目的右側（dropright菜單）。它應該繼續顯示項目子菜單，因爲我將鼠標懸停在具有子項目的項目上。

這是顯示dropright菜單（錯誤）代碼：

#droprightMenu { 
    display: none; /* hide the sub menus */ 
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
} 

#droprightMenu li { 
    float: none; 
    border-top: 1px solid #6b727c; 
    border-bottom: 1px solid #575f6a; 
    position: relative; 

} 

#droprightMenu li a { 
    color: #fff; 
} 

#droprightMenu li a:hover { 
    background: #4b545f; 
} 

這裏是我現在有： http://jsfiddle.net/vvozar/yL7su/

現在，你可以將鼠標懸停在項目「分類」時看到，然後在其子項目「全部」上，我正在下拉菜單，我不想要。我希望該菜單顯示在該項目的右側。我想用「id」來表示樣式，因爲我將動態地（在一個循環中）創建這個子菜單（無序的html列表），並且我不知道它會有多深。 感謝任何幫助。

Answer 1

你需要這個：

#droprightMenu li ul { 
    left:120px; 
    top:0px; 
} 

見：http://jsfiddle.net/JL4JY/