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

作成したメニュー

htmlおよびCSS

<style>
.menu_3d_button{
  display:inline-block;
  margin:0;
  padding:0;
  font-size:20pt;
}
.menu_3d_button>ul{
  display:flex;
  flex-direction:column;
  align-content:stretch;
  list-style:none;
  width:8em;
  margin:0;
  margin-left:0.5em;
  padding:0.2em;
}
.menu_3d_button>ul>li{
  box-sizing:border-box;
  width:8em;
  margin:0.1em; /* 隙間を埋めるなら0 */
  padding:0;
  position:relative;
}
.menu_3d_button>ul>li>a{
  position:relative;
  box-sizing:border-box;
  display:block;
  width:8em;
  height:2em;
  background:#000;
  text-decoration: none;
  padding:0.3em;
  margin:0;
  transform:translate(0,0);
  border:none;
  top:0;
}
.menu_3d_button>ul>li>a>span{
  font-size:1em;
  color:#DDD;
}
.menu_3d_button>ul>li>a:hover{
  transform:translate(0.25em,-0.25em);
  transition: all 0.1s linear;
}
.menu_3d_button>ul>li>a:active{
  transform:translate(0em,0em);
  transition: all 0.1s linear;
}

.menu_3d_button>ul>li>a::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  background:#666;
  width:0.5em;
  height:2em;
  left:-0.5em;
  top:0.25em;
  border-style:none;
  transform:skew(0deg, -45deg);
}
.menu_3d_button>ul>li>a:hover::before{
  width:0.75em;
  left:-0.75em;
  top:0.375em;
  transform:skew(0deg, -45deg);
  transition: all 0.1s linear;
}
.menu_3d_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_button>ul>li>a::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  background:#333;
  top:100%;
  left:-0.25em;
  width:8em;
  height:0.5em;
  border:none;
  transform:skew(-45deg, 0deg);
}
.menu_3d_button>ul>li>a:hover::after{
  height:0.75em;
  left:-0.375em;
  transform:skew(-45deg, 0deg);
  transition: all 0.1s linear;
}
.menu_3d_button>ul>li>a:active::after{
  height:0.5em;
  left:-0.25em;
  transform:skew(-45deg, 0deg);
  transition: all 0.1s linear;
}
</style>

<nav class="menu_3d_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>
縦並び・横並びメニューのサンプル一覧
