[html/css/js] 서브메뉴

<nav class="navbar">
  <ul class="menu">
    <li class="menu-item">
      <a href="#">홈</a>
    </li>
    <li class="menu-item">
      <a href="#">서비스</a>
      <ul class="submenu">
        <li><a href="#">서비스1</a></li>
        <li><a href="#">서비스2</a></li>
        <li><a href="#">서비스3</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">포트폴리오</a>
    </li>
    <li class="menu-item">
      <a href="#">회사 소개</a>
      <ul class="submenu">
        <li><a href="#">연혁</a></li>
        <li><a href="#">인재 채용</a></li>
        <li><a href="#">찾아오시는 길</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">문의</a>
    </li>
  </ul>
</nav>
<div id="main">
  Hello, World!;
</div>
<footer>
  email: demo@demo.com
</footer>

* {
  margin: 0;
  padding: 0;
}
.navbar {
  background-color: #333;
  padding: 10px 20px;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  position: relative;
  display: inline-block;
}

.menu-item a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
}

.menu-item:hover {
  background-color: #555;
}

/* 서브메뉴 스타일 */
.submenu {
  display: none;
  position: absolute;
  list-style: none;
  width: 120px;
  top: 100%;
  left: 0;
  background-color: #555;
  padding: 10px;
  z-index: 1;
}

.menu-item:hover .submenu {
  display: block;
}

.submenu li {
  margin-bottom: 5px;
}

.submenu a {
  color: #fff;
  text-decoration: none;
}

.submenu a:hover {
  color: skyblue;
}

#main {
  height: 100vh;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  /* 푸터를 화면 하단에 고정시키는 스타일 */
  position: sticky;
  bottom: 0;
  width: 100%;
}