メニューの作成

• 例１→　コード例：Codepenでコードを確認
  　
  
  　
  

  <ul>
    <li class="menu-css1"><a href="/">メニュー１<br />menu1</a></li>
    <li class="menu-css1"><a href="/">メニュー２<br />menu2</a></li>
    <li class="menu-css1"><a href="/">メニュー３<br />menu3</a></li>
    <li class="menu-css1"><a href="/">メニュー４<br />menu4</a></li>
    <li class="menu-css1"><a href="/">メニュー５<br />menu5</a></li>
  </ul>
  <style>
    .menu-css1 {
      float: left;
      border: none;
      border-radius: 0.5rem 2rem;
      text-decoration: none;
      list-style: none;
      margin: 0.2rem;
      padding: 0.2rem 2rem;
      background-color: green;
      cursor: pointer;
      text-align: center;
    }
  
    .menu-css1 a {
      color: white;
      text-decoration: none;
    }
  
    .menu-css1:hover {
      background-color: blue;
    }
  </style>