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

作成したメニュー

htmlおよびCSS

<style>
  nav.vmenu_colorful{
    width:200px;
    max-width:200px;
  }
  nav.vmenu_colorful ul{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
  }
  nav.vmenu_colorful ul li{
    width:100%;
  }
  nav.vmenu_colorful ul li a{
    display:inline-block;
    margin:0;
    padding:1.0em;
    color:#eee;
    text-shadow:1px 1px 2px #666;
    background:#fff;
    border:none;
    text-decoration:none;
    cursor:pointer;
    border-radius:0px 0px 0px 0px;
    vertical-align:middle;
    width:100%;
    font-weight:bold;
    user-select: none;
    transition:all 0.1s linear;
    box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.6);
  }
  nav.vmenu_colorful ul li a:active{
    box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.6) inset;
  }
  nav.vmenu_colorful ul li:nth-of-type(2n) a:hover{
    transform:perspective(400px) rotateY(20deg);
  }
  nav.vmenu_colorful ul li:nth-of-type(2n+1) a:hover{
    transform:perspective(400px) rotateY(-20deg);
  }
  nav.vmenu_colorful ul li:nth-of-type(7n+1) a{
    background:#00BFFF;
  }
  nav.vmenu_colorful ul li:nth-of-type(7n+2) a{
    background:#32CD32;
  }
  nav.vmenu_colorful ul li:nth-of-type(7n+3) a{
    background:#1E90FF;
  }
  nav.vmenu_colorful ul li:nth-of-type(7n+4) a{
    background:#8A2BE2;
  }
  nav.vmenu_colorful ul li:nth-of-type(7n+5) a{
    background:#EECC00;
  }
  nav.vmenu_colorful ul li:nth-of-type(7n+6) a{
    background:#FF8C00;
  }
  nav.vmenu_colorful ul li:nth-of-type(7n) a{
    background:#e74c3c;
  }
</style> 

<nav class="vmenu_colorful">
  <ul>
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
    <li><a href="">Menu 6</a></li>
    <li><a href="">Menu 7</a></li>
  </ul>
</nav>
縦並び・横並びメニューのサンプル一覧
