Как это исправить с помощью Css

Question

У меня есть menu, который реализован с помощью html и css.

На mouseover основного menu, я должен показать все submenus в одном месте.

Вот пример нажмите здесь jsfiddle

Для этого выравнивание submenus не является правильным.

В соответствии с примером, тест 5должен пройти тест 2, но он показывает пустое пространство.

Как правильно выровнять это?

Примечание :: Элементы Submenu будут динамическими, они могут увеличиваться или уменьшаться.

Answer 1

Проблема в том, что ваши подменю плавают влево, и Тест 5 зависает в Тесте 3, потому что он длиннее, чем Тест 4.

Вы можете проверить это, добавив правило CSS, чтобы подменю имели одинаковую высоту.

ul .sub.sub10 ul{
 height:180px;
}

Ссылка на обновленный jFiddle

Answer 2

К сожалению, это невозможно с вашей текущей разметкой: если Test5 должен был идти ниже Test2, то как бы вы автоматически запретили ему идти ниже Test1? Каким должно быть правило? Нет очевидного ответа на ваш вопрос: если вам нужны элементы разного размера для разметки с эффективным использованием пространства, без слишком большого пробела и т. Д., Вы можете написать какой-нибудь менеджер компоновки с jQuery, который будет структурировать и переставлять ваши меню в соответствии с их содержанием.