Меню с всплывающими подменю — как правильно?

Question

[Дмитрий]

Учусь. В макете столкнулся с меню, со всплывающими подменю.
Вот что уже получилось: craftband.com.ua/PopUpMenu
В ТЗ вид практически такой же, за исключением:
1. При наведении шрифт становиться жирным, но происходит это вправо, а не равномерно, на месте.
2. Пункты подменю расположены в две колонки. Я использовал css свойство разделяющее на колонки, по причине мысли о том, чтобы при добавлении подпунктов, разделялось равномерно. Однако это дало последствия ввиде куска последнего пункта первой колонки вверху второй (хорошо видно при наведении).
3. Позиционирование блоков подменю. Ввиду разной ширины основный пунктов и подпунктов, дабы добиться идеального расположения нужно задавать положение каждому подпункту отдельно. Не слишком ли это муторно?

Какие ваши мысли по поводу?

Comments

[Дмитрий]

Первый пункт решил сам после написания, он в принципе и слишком простой был. Выравнивание по центру и все.

[dk-web]

Дмитрий а меню чисто на css без js?

[Дмитрий]

dk-web: Да

Answer 1

[Дмитрий Пыркин]

насчет второго пункта надо Ul подменю задать ширину и вместо свойства деления на колонки для li добавить свойство float:left

Comments

[Дмитрий]

Такой вариант не подойдет потому как это будут скорее не колонки, а чередование по два.
А в Макете видно, что верхняя часть второй колонки является продолжением первой.

[Дмитрий Пыркин]

можно макет?

[Дмитрий]

craftband.com.ua/PopUpMenu
Добавил картинку.

[Дмитрий Пыркин]

https://jsfiddle.net/ps1panda/yn3kj3fu/ такой вариант