서브 메뉴 구현하기

이번에는 이 부분을 구현 해볼 것이다!

우선 전체적인 html의 코드를 봐보도록 하자

  <!-- 최상단 메뉴 -->
        <div class="sub-menu">
          <ul class="menu">
            <li>
              <a href="/signin">Sign In</a>
            </li>
            <li>
              <a href="javascript:void(0)">My Starbucks</a>
            </li>
            <li>
              <a href="javascript:void(0)">Customer Service & Ideas</a>
            </li>
            <li>
              <a href="javascript:void(0)">Find a Store</a>
            </li>
          </ul>
          <div class="search">
            <input type="text">
            <div class="material-icons">search</div>
          </div>
        </div>

위에서부터 봐보자면

sub-menu라는 이름을 가진 div 태그를 하나 만들어주고

그 내부에 우리가 전에 배웠던 ul, li 태그를 사용 해볼 것이다

ul , li태그는 항상 같이 쓰이며 순서가 없는 나열을 의미한다

그렇게 li태그를 우리의 서브 메뉴의 갯수만큼 만들어준다

위의 완성본을 보면 4개정도 필요한 거 같다

그러고 그 내부에 a태그를 사용하여 실제로 이동을 할 수 있게끔 구현을 해준다