Warum stapelt sich meine Liste aufeinander statt übereinander

Question

Ich versuche, ein Menü zu machen, das horizontal auf dem Bildschirm und vertikal auf dem Telefon ist. Obwohl am Telefon ist die Li übereinander gestapelt statt übereinander.

Ich habe versucht, "position: absolute" zu ändern, aber das macht mein Menü verschwinden. Gibt es eine Möglichkeit, dies zu umgehen?

.menubar { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 86.3vw; 
 
} 
 

 
.menurow { 
 
    position: fixed; 
 
    left: 1.52vw; 
 
    bottom: -0.9vh; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h3 { 
 
    position: absolute; 
 
    border: none; 
 
    background-color: transparent; 
 
    padding-bottom: 1vh; 
 
    color: black; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-weight: 400; 
 
    font-size: 1.8vw; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    bottom: 0vh; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
h3:hover { 
 
    bottom: 1.5vw; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
.navigationmobile { 
 
    visibility: hidden; 
 
} 
 

 

 
/* phone */ 
 

 
@media(max-width: 480px) { 
 
    .menurow, 
 
    #contact, 
 
    #salaris, 
 
    #personeel { 
 
    visibility: hidden; 
 
    } 
 
    .navigationmobile { 
 
    visibility: visible; 
 
    z-index: 100; 
 
    } 
 
    .navigationmobile ul { 
 
    margin: 0; 
 
    padding: 2; 
 
    width: 500px; 
 
    } 
 
    ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    h3 { 
 
    border: none; 
 
    left: 1.65vw; 
 
    background-color: transparent; 
 
    padding-bottom: 1vh; 
 
    color: black; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-weight: 400; 
 
    font-size: 1.8vw; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    bottom: 0vh; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
    } 
 
}

<div class="menurow"> 
 
    <ul class="menubar"> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-2" id="salaris">Salarisadministratie</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-4" id="personeel">Personeelszaken</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-5">Mediation</h3> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="navigationmobile"><u> 
 
     <li><h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-2">Salarisadministratie</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-4">Personeelszaken</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-5">Mediation</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-6">Contact</h3></li> 
 
     </u></div>

Answer 1

position: absolute; bottom: 0vh; von h3 entfernen. Das hält das li davon ab, das erwartete Layout auf der Seite zu haben, da eine absolute Position ein Element aus dem normalen Fluss entfernt.

.menubar { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 86.3vw; 
 
} 
 

 
.menurow { 
 
    position: fixed; 
 
    left: 1.52vw; 
 
    bottom: -0.9vh; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h3 { 
 
    border: none; 
 
    background-color: transparent; 
 
    padding-bottom: 1vh; 
 
    color: black; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-weight: 400; 
 
    font-size: 1.8vw; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
h3:hover { 
 
    bottom: 1.5vw; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
.navigationmobile { 
 
    visibility: hidden; 
 
} 
 

 

 
/* phone */ 
 

 
@media(max-width: 480px) { 
 
    .menurow, 
 
    #contact, 
 
    #salaris, 
 
    #personeel { 
 
    visibility: hidden; 
 
    } 
 
    .navigationmobile { 
 
    visibility: visible; 
 
    z-index: 100; 
 
    } 
 
    .navigationmobile ul { 
 
    margin: 0; 
 
    padding: 2; 
 
    width: 500px; 
 
    } 
 
    ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    h3 { 
 
    border: none; 
 
    left: 1.65vw; 
 
    background-color: transparent; 
 
    padding-bottom: 1vh; 
 
    color: black; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-weight: 400; 
 
    font-size: 1.8vw; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    bottom: 0vh; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
    } 
 
}

<div class="menurow"> 
 
    <ul class="menubar"> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-2" id="salaris">Salarisadministratie</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-4" id="personeel">Personeelszaken</h3> 
 
    </li> 
 
    <li> 
 
     <h3 class="mobile-menu" data-menu="menu-5">Mediation</h3> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="navigationmobile"><u> 
 
     <li><h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-2">Salarisadministratie</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-4">Personeelszaken</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-5">Mediation</h3></li> 
 
     <li><h3 class="mobile-menu" data-menu="menu-6">Contact</h3></li> 
 
     </u></div>