Список столбцов 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;
}

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

enter image description here

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

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

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

Ответы

Ответ 1

Создание родительского элемента <li> display: inline-block; похоже на "исправить":

Вот демонстрация http://jsfiddle.net/DczVL/1/

ul {
    list-style: none;
    margin:0;
    padding:0;
}
ul > li {
    display: inline-block;
    width: 100%;
}
ul > li > ul >li {
    color: red;
}
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;
}
<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>
                <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>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
    </ul>
</div>