html - CSS样式下拉/右子菜单

Question

我正在尝试使用 HTML/CSS 制作下拉菜单。实际上，问题出在下拉菜单上。将鼠标悬停在导航栏元素上时会在某些元素上触发下拉菜单，然后将鼠标悬停在该子菜单中的元素上方应该会显示另一个子菜单，位于该元素的右侧(下拉菜单)。当我将鼠标悬停在具有子元素的元素上时，它应该继续显示元素子菜单。

这是显示下拉菜单的(错误的)代码:

#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/