Keine Wirkung von z-index auf ul/li

[MrMurphy1]

Hallo

Ich versuche mal dir eine Lösung anzubieten.

Ich habe dein Problem so verstanden:

Die inneren ul-Elemente sollen nicht sichtbar sein. Dabei sollen sie aber weder komplett ausgeblendet werden noch außerhalb des Browserfensteres verschoben werden. Sondern (vom Betrachter aus) hinter den sie umschließenden li-Elementen liegen. Sobald diese umschließenden li-Elemente gehovert werden, sollen die inneren ul-Elemente wie Schmidts Katze erschreckt nach rechts springen und damit sichtbar werden.

Mal abgesehen von den beim Hovern üblichen Problemen mit Touchscreen-Bildschirmen biete ich mal folgende Lösung an:

Da es technisch nicht möglich ist, die umschließenden li-Elemente vor die inneren ul-Elemente zu heben, müssen die inneren ul-Elemente mit einem negativen z-index hinter die umschließenden li-Elemente gedrückt werden.

Zu dem HTML

   <nav>
      <ul>
         <li>
            <button>test1</button>
            <ul>
               <li>test1a</li>
               <li>test1b</li>
            </ul>
         </li>
         <li>
            <button>test2</button>
            <ul>
               <li>test2a</li>
               <li>test2b</li>
            </ul>
         </li>
         <li>
            <button>test3</button>
            <ul>
               <li>test3a</li>
               <li>test3b</li>
            </ul>
         </li>
      </ul>
   </nav>

passt dann das CSS

      li {
         list-style-type: none;
      }
      nav > ul > li {
         background-color: black;
         color: white;
         width: 12rem;
         height: 2rem;
         padding: 0.5rem;
         border: 1px solid blue;
         display: flex;
      }
      nav > ul > li > ul {
         position: relative;
         left: -2rem;
         display: flex;
      }
      nav > ul > li:nth-child(-1n+2) > ul {
         z-index: -1;
      }
      nav > ul > li > ul > li {
         position: relative;
         top: 0em;
         left: 0em;
         display: inline-block;
         border: 1px solid red;
      }
      nav > ul > li:hover ul > li {
         background-color: darkblue;
         left: 10rem;
      }

Zur Kontrolle habe ich dem dritten inneren ul-Element keinen z-index mit auf den Weg gegeben, so dass seine Position sichtbar bleibt. Das ist natürlich auch sichbar, wenn die schwarze Hintergrundfarbe der umschließenden li-Elementen entfernt wird, zum Beispiel in den jeweiligen Browser-Entwicklertools.

Gruss

MrMurphy