препятствовать тому, чтобы подменю навигации (UL) вели себя как плавающие?

Question

Я построил навигацию, где у меня есть неупорядоченный список, состоящий из группы неупорядоченных списков меньшего размера. Этим элементам присвоен класс "subnav".

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

Вот jsfiddle: http://jsfiddle.net/Cyc4n/

Если вы отрегулируете размер окна в jsfiddle, вы увидите, как меню кружится - как мне сохранить его неподвижным?

Любое направление высоко ценится

Answer 1

Вы можете использовать .navigation{min-width:900px;}, чтобы обеспечить ширину навигации не менее 900 пикселей.Это предотвратит плавающее поведение.Обратите внимание, что фактическая сумма зависит от размера шрифта, значений границ / отступов / полей и определенных полей браузера (если вы их не сбрасывали).И если вы используете относительные значения (например, em), попробуйте использовать em в min-width:....

Answer 2

Вы можете использовать display: table-cell; для .subnav и display: table; для своего родителя, .navigation (или лучше table-row для своего родителя и table для родителя последнего,но это уже работает так;))
Вот скрипка: http://jsfiddle.net/Cyc4n/1/

РЕДАКТИРОВАТЬ: в моем примере я добавил table-layout: fixed и большой отступ справа от логотипа.Это в качестве примера, если вы хотите точный контроль над вашими предметами.Не стесняйтесь удалять оба, если вы хотите, чтобы браузер делал все возможное для управления шириной элементов.

Вы также можете использовать CSS3 Flexible Box Layout , но его поддержка хуже, чем CSS2 display: table;!Хотя все должно быть в порядке, если вы специально настроили таргетинг на «мобильные» (узкие экраны) с помощью Media Queries: браузеры, поддерживающие Media Queries, также должны поддерживать Flexbox (это адаптивный дизайн с настольным компьютером, а не мобильным).
EDIT2: поддержка display: table*; это IE8 +.У вас уже есть запасной вариант для IE7 - с inline-block;)