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

作成したメニュー

htmlおよびCSS

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

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