I want to make so that the elements of a complex list, which are displayed using CSS in the form of a table, are interchanged. General idea shown in the picture on the link .

Simplified 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>

I would like to do as much as possible with the help of CSS.
Same thing on jsfiddle

  • describe the result with the markup, otherwise the picture is a very general idea - Specter
  • Level 1 serves as a header for the elements of level 2. It is necessary that level 1 should turn out to be LEVEL level 2. - Denis Khvorostin
  • Perfectly. Exactly what you need. - Denis Khvorostin

1 answer 1

on and swap levels.

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