Ниспадающая навигация в плавном дизайне, переполнение при изменении размера страницы

Question

Мне тяжело с навигацией моего плавного дизайна. Когда я сжимаю страницу, ссылки попадают под черную полосу, которую я для них обозначил. Если я скажу,

    overflow: hidden;

Тогда мои раскрывающиеся списки будут скрыты, а также необходимые ссылки в конце навигации. Думаю, все становится сложнее из-за выпадающих меню.

Кто-нибудь знает, что я могу сделать, чтобы изменить размер навигационной панели с моей страницей, сохранив все ссылки видимыми с выпадающими меню?

вот скрипка http://jsfiddle.net/pFQhm/

Answer 1

Ваша проблема связана с использованием float:left; для создания горизонтального меню. Использование float:left; требует, чтобы вы использовали overflow:hidden; для динамической навигации по высоте, как вы уже отмечали.

Альтернативой является использование display:inline-block; вместо float:left;, чтобы элементы меню располагались горизонтально. Сделав это, все остальное действительно просто.

Вот базовый пример системы навигации, использующей display:inline-block;

Итак, в вашей ситуации вы бы:

1. Удалить min-width из #top_menu
2. Удалить определение height из #top_menu
3. Удалить float:left; из #top_menu li
4. Измените display:block; на display:inline-block; на #top_menu li
5. Стиль по желанию

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

А вот jsFiddle с вашим кодом, измененным как предложено.