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

Question

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

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

<ul id="menu">
    <li>Menu Item</li>
    <li>Menu Item
        <ul class="sub-menu">
            <li>Sub Menu Item</li>        
            <li>Sub Menu Item</li>
        </ul>
    </li>
    <li>Menu Item</li>
</ul>

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

Случай 1

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

Случай 2

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

Дело 3

Как и дело 2, но на этот раз это правильный край.

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

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

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

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

Answer 1

http://jsfiddle.net/AxnVU/28/

Теперь у вас есть div, обертывающий ваши подменю, поэтому вы можете использовать некоторые приемы для позиционирования подменю, используя свойство text-align.

Если вам не нужен серый фон подменю, вы можете удалить его и добавить цвет фона только к ul внутри div.submenu, чтобы иметь тот же эффект, что и ваши фотографии.

Идея такова: у вас есть div, занимающий все доступное пространство (ширина вашего большого меню), которое содержит подменю. Подменю, отображаемое в строке, можно манипулировать свойством text-align, чтобы оно оставалось слева, в центре или справа от доступного пространства.

Редактировать

http://jsfiddle.net/AxnVU/69/

Вот еще один вариант с большим количеством голосов меню, так как предыдущий работал только для трех голосов. На этот раз нам нужно задать подменю шириной три раза тембром меню (но может быть и более), шириной 300%, и центрировать его, задав отрицательный левый край (в данном случае -100%, то есть один голос меню). Внутри подменю находится горизонтальный центр элемента списка с тем же трюком, что и раньше.