CSS styling dropdown/right submenus

Question

Я пытаюсь создать выпадающее меню с HTML/CSS. На самом деле, это простое меню. Наведение курсора на элементы навигационной панели вызывает раскрывающееся меню, когда на определенном элементе, а затем зависание над элементами в этом подменю - это отображение другого подменю, расположенного справа от элемента (меню). И он должен продолжать показывать подменю предметов, поскольку я наводил курсор на элементы, у которых есть подпункты.

Это (неправильно) код для показа 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/