Force ul li ul на новой линии при использовании flexbox

Question

после того, как я потратил два часа, пытаясь понять это самостоятельно, я чувствую, что пришло время спросить людей, которые действительно знают, как кодировать.

Какова моя ситуация

Я создаю тему WordPress и изо всех сил стараюсь, чтобы навигация работала так, как я хочу. То, что я имею в виду, выглядит так: эскиз домашней страницы

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

Это насколько я понял: https://jsfiddle.net/grysom/bpe924du/

Я пробовал случайные вещи, используя свойства flexbox + добавляя разрыв, используя: после селектора с content: "\A";, но безуспешно.

У вас есть идея, как это сделать? Это вообще возможно?

Заранее спасибо за ваши идеи!

Хорошего дня

grysom

Answer 1

Вы хотите, чтобы список 2-го уровня <ul> был внутри из <li>:

<ul>
   <li>
      Pro veřejnost
      <ul>
         <li>Co je ergoterapie</li>
         <li>Kdo je ergoterapeut</li>
         <li>Seznam zařízení</li>
         <li>Etický kodex</li>
      </ul>
   </li>
   <li>
      Praxe
       <ul>
          <li>Nabídky práce</li>
         <li>Vychytávky a tipy</li>
         <li>Legislativa</li>
      </ul>
   </li>
 </ul>

Я обновил ваш jsfiddle: https://jsfiddle.net/grysom/bpe924du/, но вам нужно будет немного скорректировать свои стили, чтобы различать уровни.