メニュー1

↓CSS
/* PC用のメニュー */
.menu01 {
    display: flex; /* フレックスボックスを使用 */
    justify-content: flex-start; /* 均等に隙間を埋める */
    width: 100%; /* メニュー全体横幅 */
}

/* メニュー個別 */
.menu01 li { 
    flex-grow: 1; /* 均等に隙間を埋める */
    text-align: center; /* 文字揃え */
    border-right: solid 1px #9e8b8e; /* 区切り線 右 */    
}

/* 最後のリストだけ */
.menu01 li:last-child{
    border-right: none; /* 区切り線 右なし */        
}

/* リンクしている状態 */
.menu01 li a {
    background-color: #dcd6d9; /* 背景色 */
    text-decoration: none; /* リンクの下線消す */
    display: block; /* ブロックにする */
    color: #281a14;  /* 文字色 */
    padding: 20px; /* 余白 */
}

/* 押したとき */
.menu01 li a:hover{
    color: #fff; /* 文字色 */
    background-color: #442220; /* 背景色 */     
}

/* ≡　の指定  */  
.navmenu01 { 
    display: none; /* 640px以上は非表示 */
}

/* 640px以下の場合 ================================================================================================ */

@media screen and (max-width: 640px){
  /* ≡　の指定 ---------------------------- */  
    .navmenu01 { 
            display: block; /* 640px以下は表示 */
            color: #f5f3eb; /* 文字色 */
            text-align: center; /* 文字揃え */
            background-color: #442220; /* 背景色 */          
            position: absolute; /* 絶対配置 */
            right:0; /* 右から0px  */
            top:0; /* 上から0px  */
            font-size: 120%; /* 文字サイズを好みで大きく */
            width: 2em; /* 横幅 */
            line-height: 2em; /* 高さ */

            }
 
    input[type="checkbox"].on-off{
            display: none; /* 通常は非表示 */
            }
 
    input[type="checkbox"].on-off + ul{ /*  + ul 隣接しているulに適用 */
            height: 0;         /* メニューを隠しておくための呪文 */
            overflow: hidden; /* display: none;では高さが出ない */
            transition: all 0.5s; /* 変わるまでの時間を設定 */
            }
 
    input[type="checkbox"].on-off:checked + ul{ /* :checkedは疑似クラス チェックボックスがオンの状態の時 */
            /*height: auto; /* 隣接する ul の高さは auto */
            height: calc(45px * 5); /* 具体的な高さを入れないと効果が出ない */           
            transform: rotateX(360deg); /* 回転風になる 好みで入れる */
            }

/* メニューの方の指定 ---------------------------- */
.menu01 {
    display: block; /* フレックスボックスを解除 */
}

/* メニュー個別 */
.menu01 li { 
    border-right: none; /* 区切り線 右 */
    border-top: solid 1px #9e8b8e; /* 区切り線 上 */
}
    .navmenu01 { cursor: pointer; } /* マウスカーソルの形状 ポインター */
}
CSSだけで切り替えるタイプ1
