コピペで使えるnav,ul,liタグとCSSで縦並びメニュー

作成したメニュー

htmlおよびCSS

<style>
  .menu_3d_colorful_button{
    display:inline-block;
    margin:0;
    padding:0;
    font-size:16px;
    padding-top:1em;
  }
  .menu_3d_colorful_button>ul{
    display:flex;
    flex-direction:column;
    align-content:stretch;
    list-style:none;
    width:16em;
    margin:0;
    margin-left:0.5em;
    padding:0.4em;
  }
  .menu_3d_colorful_button>ul>li{
    box-sizing:border-box;
    width:100%;
    margin:0.1em; /* 隙間を埋めるなら0 */
    padding:0;
    position:relative;
    transform:rotateZ( -5deg);
  }
  .menu_3d_colorful_button>ul>li>a{
    position:relative;
    box-sizing:border-box;
    display:block;
    width:100%;
    height:4em !important;
    background:#000;
    text-decoration: none;
    padding:0.5em;
    margin:0;
    transform:translate(0,0);
    border:none;
    top:0;
  }
  .menu_3d_colorful_button>ul>li>a>span{
    font-size:2em;
    color:#FFF;
  }
  .menu_3d_colorful_button>ul>li>a:hover{
    transform:translate(1.0em,-1.0em);
    transition: all 0.1s linear;
  }
  .menu_3d_colorful_button>ul>li>a:active{
    transform:translate(0em,0em);
    transition: all 0.1s linear;
  }

  .menu_3d_colorful_button>ul>li>a::before{
    box-sizing:border-box;
    content:"";
    position:absolute;
    background:#333;
    width:0.5em;
    height:4em;
    left:-0.5em;
    top:0.25em;
    border-style:none;
    transform:skew(0deg, -45deg);
  }
  .menu_3d_colorful_button>ul>li>a:hover::before{
    width:1.5em;
    left:-1.5em;
    top:0.75em;
    transform:skew(0deg, -45deg);
    transition: all 0.1s linear;
  }
  .menu_3d_colorful_button>ul>li>a:active::before{
    width:0.5em;
    left:-0.5em;
    top:0.25em;
    transform:skew(0deg, -45deg);
    transition: all 0.1s linear;
  }

  .menu_3d_colorful_button>ul>li>a::after{
    box-sizing:border-box;
    content:"";
    position:absolute;
    background:#666;
    top:100%;
    left:-0.25em;
    width:16em;
    height:0.5em;
    border:none;
    transform:skew(-45deg, 0deg);
  }
  .menu_3d_colorful_button>ul>li>a:hover::after{
    height:1.5em;
    left:-0.75em;
    transform:skew(-45deg, 0deg);
    transition: all 0.1s linear;
  }
  .menu_3d_colorful_button>ul>li>a:active::after{
    height:0.5em;
    left:-0.25em;
    transform:skew(-45deg, 0deg);
    transition: all 0.1s linear;
  }

  nav.menu_3d_colorful_button ul li:nth-of-type(7n+1) a{
    background:#00BFFF;
  }
  nav.menu_3d_colorful_button ul li:nth-of-type(7n+2) a{
    background:#32CD32;
  }
  nav.menu_3d_colorful_button ul li:nth-of-type(7n+3) a{
    background:#1E90FF;
  }
  nav.menu_3d_colorful_button ul li:nth-of-type(7n+4) a{
    background:#8A2BE2;
  }
  nav.menu_3d_colorful_button ul li:nth-of-type(7n+5) a{
    background:#EECC00;
  }
  nav.menu_3d_colorful_button ul li:nth-of-type(7n+6) a{
    background:#FF8C00;
  }
  nav.menu_3d_colorful_button ul li:nth-of-type(7n) a{
    background:#e74c3c;
  }
</style>
<nav class="menu_3d_colorful_button">
  <ul>
    <li><a href=""><span>Menu 1</span></a></li>
    <li><a href=""><span>Menu 2</span></a></li>
    <li><a href=""><span>Menu 3</span></a></li>
    <li><a href=""><span>Menu 4</span></a></li>
    <li><a href=""><span>Menu 5</span></a></li>
    <li><a href=""><span>Menu 6</span></a></li>
    <li><a href=""><span>Menu 7</span></a></li>
  </ul>
</nav>
縦並び・横並びメニューのサンプル一覧
