Позиционирован абсолютный переключаемый элемент в потоке с содержимым ниже

Question

.menu - это display: flex;, а на настольных устройствах - justify-content: space-between; Одна из ссылок меню переключает подменю, и чтобы ссылки подменю не нарушали горизонтальный интервал меню, я использую position:relative; для пункта меню и position: absolute; для подменю.

<hr>
<ul class="menu">
    <li>
        <a class="toggle" href="#submenu">submenu</a>
         <ul id="submenu" class="toggle-content">
            <li>
                <a href="#">Lorem Ipsum</a> 
            </li>
            ...
         </ul>
    </li>
    ...
</ul>
<hr>

Проблема в том, что меню ниже <hr> и больше содержимого, которое должно перемещаться вниз, когда подменю открыто, но из-за абсолютного позиционирования подменю отображается поверх остального содержимого.

<ul id="submenu"> находится внутри <ul class="menu">, потому что, насколько я знаю, это правильный HTML semanti c способ создания подменю. Любые идеи семантически допустимого способа переключения подменю, чтобы содержимое ниже перемещалось вниз, когда подменю открыто?

Jsfiddle меню https://jsfiddle.net/virsis12/qgL1ejaf/21/

Заранее большое спасибо за использование умственных способностей!

Answer 1

Здравствуйте, измените вас html и css вот так

.toggle-content {
  display: none;
}

.toggle-content.is-visible {
  display: block;
}

.toggle {
  position: relative;
}

li {
  position: relative;
}

.menu {
  margin: 0 2.5rem;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

@media (min-width: 568px) {
  .menu {
    flex-direction: row;
    justify-content: space-between;
  }
}

;

<hr>
<ul class="menu">
  <li>
    <a class="toggle" href="#submenu">submenu</a>

  </li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
  <li><a href="#">item 5</a></li>
</ul>
<ul id="submenu" class="toggle-content">
  <li>
    <a href="#">Lorem Ipsum</a>
  </li>
  <li>
    <a href="#">is simply dummy</a>
  </li>
  <li>
    <a href="#">text of</a>
  </li>
  <li>
    <a href="#">the printing</a>
  </li>
  <li>
    <a href="#">and</a>
  </li>
  <li>
    <a href="#">typesetting industry</a>
  </li>
  <li>
    <a href="#">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</a>
  </li>

</ul>
<hr>