[HTML/CSS] Navigation Bar Dropdown

Navigation Bar Dropdown

index.html

...
<nav>
    <div class="menu">
      <p class="menu-title">
      <ul class="sub">
        <li class="sub00-list00"><a href="#">Java 입문 수업</a> </li>
        <li><a href="#">Java 제어문</a> </li>
        <li><a href="#">3</a> </li>
        <li><a href="#">4</a> </li>
      </ul>
      </p>
    </div>
...

 

index.css

nav {
  /* border: 1px solid black; */
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}
nav .menu {
  /* border: 1px solid blue; */
  width: 10%;
  height: 100%;
}
nav .menu .menu-title {
  /* border: 1px solid blue; */
  width: 100%;
  height: 50px;
  /* text-align: center; */
  text-indent: 20px;
  line-height: 50px;
  font-size: 1.4rem;
  cursor: pointer;
}
nav .menu .sub {
  /* border: 1px solid red; */
  width: 100%;
  display: none;
}
nav .menu .sub li {
  /* border: 1px solid blue; */
  border-radius: 15px;
  width: 90%;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  text-indent: 20px;
  font-size: 1.2rem;
  cursor: pointer;
}
/* hover */
nav:hover {
  height: auto;
  background-color: rgb(245, 245, 245);
  transition: all 0.5s;
  overflow: hidden;
}
nav .menu:hover .sub {
  display: block;
}
nav .menu .sub li:hover {
  background-color: rgb(220, 220, 220);
}

 

menu hover시 sub menu 길이에 맞춰서 늘어나게 구현

 

본문 없이 bar만 만들었을 때 backgroundColor : transparent 적용하여 깔끔해서 만족했는데 본문 내용이 생기고 보니 이게 정말 깔끔한건가 싶었다. 방법이 없을까 생각하다 hover했을 때 그냥 잠깐 덮어주는 게 좋을 것 같아 코드를 변경하기 시작했다. nav 높이를 늘리면 정말 간단하겠다 생각하고 height : auto 적용 후 봤더니 본문 내용도 같이 밀린다. 내가 생각한 그림은 이게 아닌데 싶어서 본문 내용을 position : fixed로 고정시키고 nav 길이가 늘어나면서 본문을 덮게해서 완성!