Список столбцов CSS3 - программирование

Я использую несколько столбцов CSS3 для нескольких сайтов Wordpress и одну вещь, которую я нахожу excepteble, но все же кое-что, что я хочу знать, как исправить, состоит в том, что если я поместил список (с подпунктами) в столбцы что он не сохранит структуру списка

Чтобы убедиться, что это HTML:

<div>
<ul>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul>
   </li>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul
   </li>
</ul>
</div>

И CSS будет:

div{
-webkit-column-count:3;   
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;   
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}

И вот что вы получаете:

Это хорошо, потому что это позволяет в Wordpress показывать такое меню. Но одна вещь, которая меня беспокоит, заключается в том, что она помещает элементы Sub-list в следующий столбец, в то время как родительский элемент этого элемента находится в предыдущем столбце.

Это исправление?

Прежде чем кто-нибудь скажет: почему бы вам просто не сделать несколько списков и не создать свои собственные столбцы (это было предложение, когда я задал вопрос, как это сделать), это для динамического меню Wordpress, поэтому я не могу контролировать, как многие пункты находятся в меню.

Ответ 1