Возможно ли это позиционирование подменю только с помощью CSS?

Извиняюсь за неопределенный вопрос, я не могу подумайте о кратком, информативном.

Я делаю выпадающее меню из неупорядоченных списков, которые выглядят примерно так ....

    
Menu Item
    
Menu Item
        

            
Sub Menu Item
        
            
Sub Menu Item
        
    
    
Menu Item

Однако мне интересно, возможно ли такое поведение позиционирования (изображения лучше это объясняют. think)

Случай 1

Подменю центрируется в том месте, где находится элемент списка, но шире, чем оно содержит элемент списка.

Случай 2

Подменю должно быть центрировано, но в корневом списке недостаточно свободного места, поэтому оно остается на одном уровне с левым краем корневого списка.

Случай 3

То же, что и Случай 2, но на этот раз правый край.

Я думаю, что это можно разбить на две сложные задачи CSS.

1. Как центрировать подменю по его контейнеру, несмотря на то, что оно шире контейнера.
2. Как предотвратить выход подменю за пределы элемента корневого списка.

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

Здесь есть JSFiddle , с которым можно поиграть, если у вас есть какие-либо теории.