リストがお互いの上に積み重ねられているのはなぜですか

Question

私はスクリーン上で水平で、電話では垂直なメニューを作ろうとしています。 電話では、liは互いの上にではなく、互いの上に積み重なっています。

私は "position：absolute"を変更しようとしましたが、これによりメニューが消えます。 これを回避する方法はありますか？

.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

h3からposition: absolute; bottom: 0vh;を削除します。それはabsoluteの位置が通常のフローから要素を削除するので、liがページ上に期待されるレイアウトを持つのを防いでいます。

.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>