CSSで簡単に実装できる縦並びメニュー【サンプルコード付き】

縦並びのCSSナビゲーションメニューのサンプルとHTMLとCSS

<nav>タグのクラスに"vmenu"を指定するだけで使えるCSSです。
カスタムプロパティ変数を使用しているので、以下の変数の値を変えるだけで自由にカスタマイズできます。
--border-color、--background-color、--hover-background-color、--text-color

<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{
  --border-color: #111111;
  --background-color:#2C3E50;
  --hover-background-color:#34495E;
  --text-color:#ECF0F1;
  --font-size:20px;
  width:12em;
  max-width:100%;
  box-sizing:border-box;
  font-size:var(--font-size);
}
@media (max-width: 768px) {
  nav.vmenu{
    font-size:calc(var(--font-size) * 18 / 20);
  }
}
@media (max-width: 480px) {
  nav.vmenu{
    -webkit-text-size-adjust:100%;
    font-size:calc(var(--font-size) * 16 / 20);
  }
}
  nav.vmenu>ul{
    list-style:none;
    margin:0;
    padding:0;
    border:1px solid var(--border-color);
    border-radius:0.5em;
    background:var(--background-color);
  }
    nav.vmenu>ul>li{
      border-bottom:1px solid var(--border-color);
    }
    nav.vmenu>ul>li:last-child{
      border-bottom:none;
      border-radius:0 0 0.5em 0.5em;
    }
    nav.vmenu>ul>li:first-child{
      border-radius: 0.5em 0.5em 0 0;
    }
    nav.vmenu>ul>li:hover{
      background:var(--hover-background-color);
    }
      nav.vmenu>ul>li>a{
        display:block;
        padding:0.5em 1em;;
        text-decoration:none;
        color:var(--text-color);
        width:auto;
        position:relative;
        touch-callout:none;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select:none;
        -webkit-user-drag:none;
        pointer-events: none;
      }
      nav.vmenu>ul>li>a:after{
        content:">";
        position:absolute;
        text-align:right;
        color:var(--text-color);
        right:1em;
        top:50%;
        transform:translateY(-50%);
      }
</style>

カスタムプロパティ変数を変更してカスタマイズした例

<div>
  <nav class="vmenu" style="--border-color:#FCC;--background-color:#FF6B6B;--hover-background-color:#FFA07A;--text-color:#FFF;">
    <ul>
      <li><a href="">メニュー１</a></li>
      <li><a href="">メニュー２</a></li>
      <li><a href="">メニュー３</a></li>
      <li><a href="">メニュー４</a></li>
    </ul>
  </nav>
</div>

<div>
  <nav class="vmenu" style="--border-color:#CCC;--background-color:#FF6B6B;--hover-background-color:#FFA07A;--text-color:#FFF;">
    <ul>
      <li><a href="">メニュー１</a></li>
      <li><a href="">メニュー２</a></li>
      <li><a href="">メニュー３</a></li>
      <li><a href="">メニュー４</a></li>
    </ul>
  </nav>
</div>

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