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

作成したメニュー

htmlおよびCSS

<nav class="vmenu">
  <ul>
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー３</a></li>
    <li><a href="">メニュー４</a></li>
  </ul>
</nav>

<style>
nav.vmenu{
  width:300px;
  max-width:300px;
}
nav.vmenu ul{
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #acf;
  border-radius:10px;
  background:#eff;
}
nav.vmenu ul li{
  border-bottom:1px solid #acf;
}
nav.vmenu ul li:last-child{
  border-bottom:none;
  border-radius:0 0 10px 10px;
}
nav.vmenu ul li:first-child{
  border-radius:10px 10px 0 0;
}
nav.vmenu ul li:hover{
  background:#def;
}
nav.vmenu ul li a{
  display:block;
  padding:12px 20px;
  text-decoration:none;
  color:#69f;
  width:auto;
  position:relative;
  text-shadow: 1px 2px 3px #aaa;
}
nav.vmenu ul li a:after{
  content:">";
  position:absolute;
  text-align:right;
  color:#69f;
  right:20px;
  text-shadow: 1px 2px 3px #aaa;
</style>

縦並び・横並びメニューのサンプル一覧