Как сделать списки в много колонок?

Question

[Dizzol]

Здравствуйте, есть всплывающее меню.

<ul class="menu">
<li><a href="#">Основная ссылка</a><li>
<div class="dropdown films">
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
</ul>
<ul>
<li>Ссылка 4</li>
<li>Ссылка 5</li>
<li>Ссылка 6</li>
</ul>
</div>
</ul>

.menu li {
    display: inline-block;
    position: relative;
}
 
.menu > li > a {
    padding-left: 25px;
}
 
.dropdown {
    background: #fff;
    padding: 20px 30px;
    line-height: 1;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    visibility: hidden;
}
 
.menu > ul > li:hover .dropdown {
    opacity: 1;
    visibility: visible;
}
 
.dropdown li {
    padding-bottom: 20px;
}
 
.dropdown li:last-child {
    padding: 0;
}
 
.dropdown li a {
    float: left;
}
 
.dropdown.films {
    left: 0;
}
 
.dropdown.films ul {
    float: left;
    margin-right: 50px;
}

Т.е таких всплывашек много и они не должны иметь фикс. ширины или высоты, так как там текст может поменяться. И нужно разделить ul в 2 и/или более колонки. Подскажет кто, что я делаю не так?

Comments

[Александр Карпов]

У вас в примере уже что-то не так с версткой. ul неправильно вложены. div тоже не может быть размещен в таком контексте.

[Александр Карпов]

Приведите пример в https://jsfiddle.net/

[Dizzol]

Александр К: https://jsfiddle.net/pd4ab8zw/

[Dizzol]

Александр К: див мне нужен был для примера. Или как можно по-другому сделать, не прибегая к разделённым

Answer 1

[Александр Карпов]

Мне точно не ясно, что вы хотите, но может это вас натолкнет на на верное решение https://jsfiddle.net/pd4ab8zw/1/

Comments

[Dizzol]

Спасибо, помогли.