CSS-Kniffliges zum Wochenende

[1unitedpower]

Vor einiger Zeit hab ich mal dieses responsive Menü gebaut. Nun musste ich erfahren, dass der button ins nav-Element gehört – so wie in diesem Pen. Der funktioniert auch im Firefox, weil der (als einziger) display: contents unterstützt. Hat jemand eine Idee, wie man das auch für andere Browser hinbekommt? (Außer mit Floats?)

Meine Entwickelrtools zeigen 5 net::ERR_INSECURE_RESPONSE-Fehler an, liegt vermutlich am fehlenden https. Wenn es daran nicht liegt, was funktioniert nicht wie erwartet?

Wäre hier nicht eigentlich <details> angebracht?

<nav id="main-nav">
  <details open>
    <summary aria-controls="main-nav-list" aria-expanded="true">Menu</summary>
    <ul id="main-nav-list">
	    <li><a href="">fluid grids</a></li>
      <li><a href="">flexible images</a></li>
      <li><a href="">media queries</a></li>
    </ul>
  </details>
</nav>