Ich habe jetzt mal in Zeile 172 folgendes eingesetzt: `nav > ul ul.group > li {display:flex; min-width: calc(23em - 0.7rem); flex-flow:row wrap;}` Guck mal was er jetzt macht. KOMISCH!!! B) Du meinst: `<ul class="tree"> <li class="main-treeitem">` Das könne weg? Hmmm ja, wäre wirklich einfacher, müßte nur die einzelnen Pfade zu den Bottons und den li`s neu ausknobeln. Wäre das wirklich wichtig, einfacher , schlanker ... Zuallererst hatte ich es folgendermassen: `<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav"> <button aria-expanded=""> </button> <ul> <li> <a class="a-link" href="http://tassilosturm.de/aktuell.html">Aktuelles</a> <button aria-expanded=""> </button> <div class=nav-group> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">aktuelle Ausstellungen</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Blog</a> </div> </li> <li> <a class="a-link" href="http://tassilosturm.de/arbeiten.html">Arbeiten</a> <button aria-expanded=""> </button> <div class=nav-group> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit01.html">Drifters, 2012</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Waldfrieden, 2006</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit03.html">Eremitage für Paris, 2006</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit04.html">Der Bau, 2007</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit05.html">Utopia Planetia, 2006</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit06.html">Kellerräume, 2012-15</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit07.html">Bunker / Maquetten, 2012-16</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit08.html">Take Shelter, 2015</a> </div> </li> <li> <a class="a-link" href="http://tassilosturm.de/cv.html">Curriculum Vitae</a> <button aria-expanded=""> </button> <div class=nav-group> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Lebenslauf</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Studium & Stipendien</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Publikationen (Auswahl)</a> </div> </li> <li> <a class="a-link" href="http://tassilosturm.de/texte.html">Texte</a> <button aria-expanded=""> </button> <div class=nav-group> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Bettina Mühlbauer</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Friederike Fast</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Wolfgang Türk</a> </div> </li> <li> <a class="a-link" href="http://tassilosturm.de/ausstellungen.html">Ausstellungen</a> <button aria-expanded=""> </button> <div class=nav-group> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Einzelausstellungen</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Gruppenausstellungen</a> </div> </li> <li> <a class="a-link" href="http://tassilosturm.de/impressum.html">Impressum</a> <button aria-expanded=""> </button> <div class=nav-group> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Kontakt</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Fotodokumentation</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Links</a> <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Datenschutz & Urheberrecht</a> </div> </li> </ul> </nav> <main> <figure> <img class="imgA" src="img/indexseite/wohnsarg_bearbeitet_web.jpg" alt="Reiseesel" /> <figcaption>Ich ziehe um!</figcaption> </figure> </main> </div>` mein CSS /* nav specific */ nav > button {margin-left:auto; display: block; width:3.1rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block; } nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); } nav > ul > li > :nth-child(2){display:block; width:3.1rem; } nav > ul > li > :nth-child(3){display:block; width:100%; } .nav-group{ border: 4px solid black; padding: 0.2em 1.2vw; margin: 0.2em 0;} /* box-shadow: 0 0 0.2em 0 #666; */ .nav-group a{display:block;} nav button:hover, nav button:focus { background: hsla(0, 100%, 100%, 0.8); } button[aria-expanded] { /* NOTWENDIG? */ font-size: 13px; } ~~~CSS /* nav specific */ nav > button {margin-left:auto; display: block; width:3.1rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block; } nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); } nav > ul > li > :nth-child(2){display:block; width:3.1rem; } nav > ul > li > :nth-child(3){display:block; width:100%; } .nav-group{ border: 4px solid black; padding: 0.2em 1.2vw; margin: 0.2em 0;} /* box-shadow: 0 0 0.2em 0 #666; */ .nav-group a{display:block;} nav button:hover, nav button:focus { background: hsla(0, 100%, 100%, 0.8); } button[aria-expanded] { /* NOTWENDIG? */ font-size: 13px; } /* Buttons mit Icons anreichern */ [aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded]::after { content: " "; white-space: normal; } [aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } [aria-expanded="false"]::after { content: " "; } [aria-expanded="false"] + * { display:none !important;} /*media queries*/ @media screen and (min-width: 1440px) { #main-nav { flex-grow: auto; flex-shrink: auto; flex-basis: 24em; align-self: flex-start; } main { flex-grow: 1; flex-shrink: 1; flex-basis: calc(100% - 14em - 24em); } nav > [aria-expanded="false"]{ display:none; } nav > [aria-expanded="false"] + * {display:block !important; } } @media screen and (min-width: 850px) and (max-width: 1440px) { .contentspan { margin: 0 1.2em 0 1.2em; } main { flex-grow: 1; flex-shrink: 1; flex-basis: auto; /* flex: 1 1 auto; */ } #main-nav { align-self: flex-start; } div.contentspan nav > ul { display: block !important; margin-left: -26em; transition: margin-left 0.15s; width: 22em; } nav button[aria-expanded="true"]+ul { margin-left: 0; margin-top: 1em; } nav button[aria-expanded="false"]+ul > * { display: none; } } @media screen and (max-width: 850px) { .contentspan { display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: auto; flex-shrink: auto; flex-basis: auto; /* flex: 0 0 100%; */ } .fav { margin: 0; padding: 0; } .headingspan { align-self: flex-start; } header { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; } header img { height: 110px; } #main-nav { flex-grow: auto; flex-shrink: auto; flex-basis: auto; /* flex: 1 1 100%; */ } nav button[aria-expanded="true"]+ul { margin: 1em 0 0 0; padding: 0; width: 100%; } } ~~~

Ich habe jetzt mal in Zeile 172 folgendes eingesetzt: `nav > ul ul.group > li {display:flex; min-width: calc(23em - 0.7rem); flex-flow:row wrap;}` Guck mal was er jetzt macht. KOMISCH!!! B) Du meinst: `<ul class="tree"> <li class="main-treeitem">` Das könne weg? Hmmm ja, wäre wirklich einfacher, müßte nur die einzelnen Pfade zu den Bottons und den li`s neu ausknobeln. Wäre das wirklich wichtig, einfacher , schlanker ...

Ich habe jetzt mal in Zeile 172 folgendes eingesetzt: `nav > ul ul.group > li {display:flex; min-width: calc(23em - 0.7rem); flex-flow:row wrap;}` Guck mal was er jetzt macht. KOMISCH!!!