0

Хочу сделать так, чтобы элементы сложного списка, выводящиеся при помощи CSS в виде таблицы, менялись местами. Общая идея показана на картинке по ссылке
(источник: khvorostin.com)
.

Упрощенный CSS:

#menu ul {
display: table-row
}

#menu ul li {
display: table-cell;
}

#menu ul li ul {
display: table-row;
}

#menu ul li ul li {
display: table-cell;
}

HTML:

<div id="menu">
  <ul>
    <li>Уровень1 (элемент 1)
  <ul>
    <li>Уровень 2 (элемент 1)</li>
    <li>Уровень 2 (элемент 2)</li>
  </ul>
</li>
<li>Уровень1 (элемент 2)
  <ul>
    <li>Уровень 2 (элемент 3)</li>
    <li>Уровень 2 (элемент 4)</li>
  </ul>
</li>
  </ul>
</div>

Хотелось бы по возможности обойтись силами CSS.
То же самое на JSfiddle

3
  • опишите результат разметкой, а то на картинке идея уж сильно общая
    – Spectre
    3 мая 2012 в 13:19
  • Уровень 1 выполняет роль шапки для элементов уровня 2. Нужно, чтобы уровень 1 оказался ПОД уровнем 2. 3 мая 2012 в 13:28
  • Прекрасно. Именно то, что нужно. 4 мая 2012 в 6:26

1 ответ 1

1

на и поменяйте местами уровни.

<li>
  <ul>
    <li>Уровень 2 (элемент 3)</li>
    <li>Уровень 2 (элемент 4)</li>
  </ul>
  Уровень1 (элемент 2)
</li>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.