<h1>완료 : 1차 메뉴아이템 중 첫 번째 녀석에 포함된 3차메뉴는 우측에 나와야 합니다.</h1>
<!--
nav.menu-1>ul>li*4>a[href=#]{1차 메뉴 아이템 $}+ul>li*4>a[href=#]{2차 메뉴 아이템 $}+ul>li*4>a[href=#]{3차 메뉴 아이템 $}
-->
<nav class="menu-1">
<ul>
<li>
<a href="#">1차 메뉴 아이템 1</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템 1</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 2</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 3</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 4</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 2</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템 1</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 2</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 3</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 4</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 3</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템 1</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 2</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 3</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 4</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 4</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템 1</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 2</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 3</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 4</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>/* 노말라이징 */
body, ul, li {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* 노말라이징 */
/* 메뉴랩퍼 */
.menu-1 {
text-align:center;
}
/* 메뉴 */
.menu-1 ul {
background-color:#dfdfdf;
}
/* 1차 메뉴 */
.menu-1 > ul {
display:inline-block;
padding:0 10px;
border-radius:5px;
}
/* 1차 메뉴 아이템 */
.menu-1 > ul > li {
display:inline-block;
}
/* 메뉴아이템 텍스트 */
.menu-1 ul > li > a {
display:block;
padding:10px;
}
/* 마우스가 올려진 메뉴아이템의 자식인 텍스트 */
.menu-1 ul > li:hover > a {
background-color:black;
color:white;
}
/* 서브메뉴 */
.menu-1 > ul ul {
display:none;
/* 유령화 */
position:absolute;
top:100%;
left:0;
width:100%;
}
/* 서브메뉴(3차메뉴 이하) */
.menu-1 > ul ul ul {
top:0;
left:auto;
right:100%;
}
/* 첫번째 1차 메뉴 아이템에 포함된 3차메뉴 */
.menu-1 > ul > li:first-child > ul ul {
right:auto;
left:100%;
}
/* 마우스가 올려진 메뉴아이템의 자식인 메뉴 */
.menu-1 ul > li:hover > ul {
display:block;
}
/* 메뉴아이템 */
.menu-1 ul > li {
position:relative;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.