Как создать выпадающее меню, которое шире, чем его заголовок?

Question

Вот основная структура моего меню. Я не могу это изменить.

<ul>
    <li><span>Bedroom</span></li>
    <li><span>Kitchen</span>
        <ul>
            <li><span>Pot</span></li>
            <li><span>Panholder</span></li>
        </ul>
    </li>
    <li><span>Garden</span></li>
</ul>

Вот макет, который я хочу достичь:

Bedroom | Kitchen | Garden
        | Pot       |
        | Panholder |

Как видите, Держатель для сковороды шире, чем кухня. Как я могу отключить ширину Кухня от ширины ее подменю? (Подменю могут перекрываться, я буду скрывать все подменю, кроме текущего.

Я ищу решение без поддержки JavaScript. Если вы хотите попробовать, Я поместил его на jsFiddle .

Answer 1

Добавьте position: absolute к вашему выпадающему списку <ul>.В вашем jsFiddle это будет выглядеть следующим образом:

body > ul > li > ul {
    position: absolute;
}

Answer 2

Укажите большую ширину вложенных элементов ul или li, таких как:

ul { width: 100px; }
ul li ul { width: 200px; }

Это должно сделать вложенный ul больше, чем его родитель.

С точки зрения полного раскрывающегося списка CSS вам доступно множество решений. Хорошее место для начала было бы www.cssplay.co.uk