【初心者でもわかる】親子関係を持つメニューの作り方

<ul class="menu">
  <li>
    <a href="#">①あの段</a>
    <ul class="child">
      <li><a href="#">①-1 あ</a></li>
      <li><a href="#">①-2 い</a></li>
      <li><a href="#">①-3 う</a></li>
      <li><a href="#">①-4 え</a></li>
      <li><a href="#">①-5 お</a></li>
    </ul>
  </li>
  <li>
    <a href="#">②かの段</a>
    <ul class="child">
      <li><a href="#">②-1 か</a></li>
      <li><a href="#">②-2 き</a></li>
      <li><a href="#">②-3 く</a></li>
      <li><a href="#">②-4 け</a></li>
      <li><a href="#">②-5 こ</a></li>
    </ul>
  </li>
</ul>

.menu {
  width: 150px;                /* 適当なサイズを指定 */
  border: 1px solid #666;      /* 枠線を作成 */
}

.menu li a {
  width: 100%;                 /* 幅を100%に指定 */
  border-top: 1px solid #666;  /* 上に線を引く */
  padding: 10px 20px;          /* 余白を指定 */
  display: inline-block;       /* 幅指定・余白を付けるために必要 */
  box-sizing: border-box;      /* 計算を簡単にするために必要 */
}

.menu > li:first-child > a {
  border-top: none;            /* 最初は上の線を無くす */
}

.menu li a:hover{
  background: #CCF;            /* カーソルを乗せた時の見た目 */
}

.menu li .child li a {
  padding-left: 40px;          /* 左の余白を大きめに上書き */
}

/* .childのCSSを少し変更 */
.menu li .child li a {
  width: calc(100% - 30px);
  margin-left: 30px;
  padding-left: 10px;
  border-top: 1px solid #CCC;
}