<label for="menuOn">
    <input id="menuOn" type="checkbox">
    <menu>
      <ul>
        <li><a href="#menu1">概要</a>
        <li><a href="#menu2">逆Ｌ字をつくる</a>
        <li><a href="#menu3">ボタン切替</a>
        <li><a href="#menu4">リスト幅可変</a>
        <li><a href="#menu5">ボタン表示</a>
        <li><a href="#menu6">動作環境</a>
        <li><a href="#menu7">仕様</a>
        <li><a href="#menu8">免責事項</a>
      </ul>
    </menu>
    <div class="spacer"></div>
    <div class="overlay"></div>
  </label>

/* ========================================================== */
/*   ここから下がメニューの設定                                */
/* ========================================================== */

/* メニューのON/OFFを保存する為のチェックボックス 非表示 */
#menuOn{
  display : none
}

/* 隠しメニューを表示したとき用のスペーサー */
/* なのでデフォルトでは非表示               */
#menuOn + menu + div.spacer{
  display : none;
}

/* 隠しメニューを表示時のメニューの設定 */
/* absolute指定を行い、高さも与える     */
#menuOn:checked + menu{
  height    : calc(100% - 96px); /* 96pxはヘッダの高さ可変だと厳しい */
  position  : absolute;
  max-width : 960px;/*コンテナと同じ数値を指定しておく必要あり*/
  z-index   : 20;
  background: transparent;
}

/* スペーサー                                           */
/* 隠しメニューが表示されているときにメニュー全体が     */
/* absoluteになり高さが失われるので、                   */
/* スペーサーで高さを補います                           */
#menuOn:checked + menu + div.spacer{
  display   : block;
  height    : 40px; /*メニューの高さに合わせる*/
}

/* オーバーレイ                                         */
/* 隠しメニューが表示されているときに                   */
/* LightBoxのように画面全体を覆うブロックを表示する     */
/* これによってメニュー部分を除いて                     */
/* 画面全体がチェックボックスへのクリックになるので     */
/* メニュー以外の部分をクリックするとメニューが閉じます */
#menuOn:checked + menu + div.spacer + div.overlay{
  position : fixed;
  top      :  0;
  bottom   :  0;
  left     :  0;
  right    :  0;
  z-index  : 10;
  /*background : rgba(0,0,0,0.5);*/
}

menu{
  height      : 40px; /* メニューの高さすべてこれに合わせる*/
  overflow    : hidden;
  font-size   : 20px;
  line-height : 20px;
  width       : 100%;
  min-width   : 200px;
  background  : #33aa33;  /* リスト(li)要素の背景色と合わせる*/
}

/* メニューの高さ分のスペースを空ける */
menu::before {
  display : block;
  content : '';
  float   : left;
  width   : 0;
  height  : 40px; /*メニューの高さに合わせる*/
}

ul{
  height : 320px;/*リスト項目(8)*メニューの高さ(40px)=320px以上*/
  width  : calc(100% + 200px);/*隠しリストの幅を足す*/
}

/* 逆L字を作る為の左下のブロック*/
ul::before {
    display : block;
    content : '';
    float   : left;
    clear   : both;
    width   : calc(100% - 200px);/*隠しリストの幅を引く*/
    height  : 100%;
}

li:first-child{
  padding-left : 200px;/*隠しリストの幅*/
  max-width    : 600px;/*隠しリストの幅*3 */
}

li{
  display       : inline-block;
  background    : #33aa33;  /* メニュー要素の背景色と合わせる*/
  min-width     :  305px;/*隠しリストの幅/2+α*/
  max-width     :  400px;/*隠しリストの幅*2 */
  margin-left   : -200px;/*-隠しリストの幅*/
  white-space   : nowrap;
  text-overflow : ellipsis;
}

li a{
  display       : block;
  padding       :  10px;
  padding-right : 210px;/*隠しリストの幅+10px */
}

/* ========================================================== */
/*   ここから下ははみ出たリストを表示する為のボタンの制御     */
/* ========================================================== */

li:last-child{
  position : relative;
}

/* メニューのボックスの幅が狭まって、リストが隠れた場合に*/
/* 隠れたリストが見れるボタンを作る */
li:last-child::after{
  position    : absolute;
  z-index     : 30;
  display     : block;
  /* メニューの項目数以上必要                     */
  /* \bb は終わりギュメ                           */
  /*   RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK */
  /* \a  は改行コード                             */
  content     : '\bb\a\bb\a\bb\a\bb\a\bb\a\bb\a\bb\a\bb\a';
  bottom      : 40px;/* メニューの高さに合わせる*/
  right       :  0;
  width       : 125px;
  color       : white;
  white-space : pre;
  line-height : 40px;
  background  : #229922;
  padding-left: 10px;
}

/* リストを見るボタンが押されている場合は消す */
#menuOn:checked + menu li:last-child::after{
  display : none;
}

/* 隠しリストが表示されているときは常に表示 */
#menuOn:checked + menu::after {
  position     : absolute;
  z-index      : 30;
  display      : block;
  content      : '\bb';
  line-height  : 40px;
  width        : 20px;
  padding-left : 10px;
  color        : white;
  right        :  0;
  top          :  0;
  background   : #229922;
}