стиль Google падение вниз - содержание больше чем родитель

Question

Это мой полный код: https://jsfiddle.net/dv6gxtoh/2/

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

Лучший пример, который я могу дать что-то немного, как это:

http://i.stack.imgur.com/w3ym8.png

Это CSS я использую:

* { 
    margin: 0; 
    padding: 0; 
} 
.click-nav ul { 
    position:relative; 
    display: inline-block; 
} 
.click-nav ul li { 
    position: relative; 
    list-style:none; 
    cursor:pointer; 
    display:inline-block; 
} 
.click-nav ul li ul { 
    position:absolute; 
    left:0; 
    right:0; 
} 
.click-nav ul .clicker { 
    position:relative; 
    color:black; 
} 
.click-nav ul .clicker:hover, .click-nav ul .active { 
    background:#196F9A; 
} 
.click-nav ul li a { 
    display:block; 
    padding:8px 10px; 
    background:#FFF; 
    color:#333; 
    text-decoration:none; 
} 
.click-nav ul li a:hover { 
    background:#F2F2F2; 
} 
/* Fallbacks */ 
.click-nav .no-js ul { 
    display:none; 
} 
.click-nav .no-js:hover ul { 
    display:block; 
} 

Ближайший я мог бы получить его, чтобы удалить position:relative; от .click-nav ul, который делает трюк, кроме выпадающего меню не сидит под кнопкой, которая открывала его.

Любая помощь будет оценена по достоинству.

Answer 1

Кажется мне white-space : nowrap, что вам нужно, то есть

.click-nav ul li a { 
    display:block; 
    padding:8px 10px; 
    background:#FFF; 
    color:#333; 
    text-decoration:none; 
    white-space: nowrap; 
} 

раздвоенной скрипка ->http://jsfiddle.net/j5ckepbm/

Answer 2

Проверьте общую скрипку ..

вам нужно сделать некоторые изменения в css, например добавление и ширина/мин-ширина в раскрывающееся меню.

white-space:nowrap 

Click to see the fiddle, commented lines are mine changes

Answer 3

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

.click-nav ul li ul li { 
    width: 150px; 
} 

Вот fiddle