헤더와 드롭다운 메뉴 - 서브 메뉴

서브 메뉴 작성 및 정렬

코드

HTML

<nav 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)">Custmer Service & Ideas</a>
    </li>
    <li>
      <a href="javascript:void(0)">Find a Store</a>
    </li>
  </ul>
  <div class="search">
    <input type="text" name="" id="" />
    <div class="material-icons">
      search
    </div>
  </div>
</nav>

CSS

header .sub-menu {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
}

header .sub-menu ul.menu {
  font-family: Arial, sans-serif;
  display: flex;
}

header .sub-menu ul.menu li {
  position: relative;
}

header .sub-menu ul.menu li::before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

header .sub-menu ul.menu li:first-child::before {
  display: none;
}

header .sub-menu ul.menu li a {
  font-size: 12px;
  padding: 11px 16px;
  display: block;
  color: #656565;
}

header .sub-menu ul.menu li a:hover {
  color: #000;
}