<div class="container nav_main">
<!-- 왼쪽 글자 정렬 -->
<div class="nav_item" style="margin-right: auto; margin-left: 2rem; padding-top: 1.6rem; font-size: 1.5rem;">
<a href="#" style="position: static;">Doyeon0430</a>
</div>
<!-- 오른쪽 글자 정렬 -->
<!-- 1번 메뉴 링크 -->
<div class="nav_item">
<a href="#">나의 소개</a>
</div>
<!-- 2번 메뉴 링크 -->
<div class="nav_item">
<a href="#">영화 이야기</a>
</div>
<!-- 3번 메뉴 링크 -->
<div class="dropdown_king nav_item">
<a href="#">영화 감상 후기</a>
<div class="dropdown_main"> <!-- 드롭다운 글자 -->
<a href="#">
<div>
드롭다운 1
</div>
</a>
<a href="#">
<div>
드롭다운 2
</div>
</a>
<a href="#">
<div>
드롭다운 3
</div>
</a>
</div>
</div>
<!-- 4번 메뉴 링크 -->
<div class="dropdown_king nav_item" style="margin-right: 0;">
<a href="#">기초 공학 정리</a>
<div class="dropdown_main"> <!-- 드롭다운 글자 -->
<a href="#">
<div>
드롭다운 1
</div>
</a>
<a href="#">
<div>
드롭다운 2
</div>
</a>
<a href="#">
<div>
드롭다운 3
</div>
</a>
</div>
</div>
</div>
.nav_main {
font-weight: 900;
font-size: 1.1rem;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 3rem;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.nav_item {
position: relative;
flex: 0 0 auto;
margin-right: 4.5rem;
padding-top: 2rem;
padding-bottom: 1rem;
}
.nav_item > a {
color: #000000;
text-decoration: none;
position: relative;
display: inline-block;
}
.nav_item > a:after {
content: '';
position: absolute;
left: 50%;
top: -2px;
width: 0;
height: 2px;
background-color: #000000;
transition: width 0.2s ease-in-out;
transform: translateX(-50%);
}
.nav_item:hover > a:after {
width: 100%;
}
.dropdown_main {
margin: 0;
display: block;
position: absolute;
z-index: 1;
background-color: #fffafa;
justify-content: center;
align-items: center;
border-radius: 3px;
top: 3.9rem;
right: 0rem;
width: 11rem;
border: 1px solid rgb(99, 96, 96);
box-shadow: 0 40px 40px rgb(0 0 0 /6%);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: transform 0.3s;
}
.dropdown_main a {
display: block;
color: #000000;
font-weight: 400;
font-size: 1rem;
text-align: left;
text-decoration: none;
}
.dropdown_main a div{
padding: 0.5rem 0rem 0.5rem 0.5rem;
}
.dropdown_king:hover .dropdown_main {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown_main a:hover {
background-color: #c9cac9;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.