Адаптированная ширина в раскрывающемся меню CSS

Question

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

Я попытался установить вручную ширину, но это просто unaligns все это и не практичное как пункт меню может быть гораздо больше. Есть ли в любом случае ширина, адаптируемая к контенту, без изменения ширины родительского элемента?

Все файлы сайта находятся здесь: http://dev.cuonic.com/bourree/

• Главная страница: http://dev.cuonic.com/bourree/index.html
• Stylesheet: http://dev.cuonic.com/bourree/css/style.css

Любая помощь приветствуется, спасибо :)

Answer 1

Вот решение, которое не использует фиксированную ширину для раскрывающихся.

Во-первых, добавьте следующую строку в CSS для ссылок в раскрывающихся:

#menu ul ul li a { 
    white-space: nowrap; 
} 

Я также должен был изменить #menu ul и #menu ul li к #menu > ul и #menu > ul > li, соответственно, так, что бы применить эти стили CSS только до пунктов меню первого уровня.

Вот базовая ссылка об использовании > в селекторах CSS. Я думаю, что есть и другие места в этом примере, где бы помочь:

http://reference.sitepoint.com/css/childselector

Answer 2

играя в firefox/firebug Я обнаружил, что эта комбинация, казалось, давала желаемый эффект:

#menu ul ul li { 
    display: block; 
    float: left; 
    left: -34px; 
    position: relative; 
    width: 200px; 
}