프로그래밍/HTML, CSS, JSP, 서블릿
HTML, CSS 연습문제(3차메뉴 구현 등)
현호s
2020. 6. 8. 09:14
반응형
*3차 메뉴 구현
// HTML
// 젠코딩 : nav.menu-1>ul>li*4>a[href="#"]{1차 메뉴 아이템}+ul>li*4>a[href="#"]{2차 메뉴 아이템}+ul>li*4>a[href="#"]{3차 메뉴 아이템} + tab
<nav class="menu-1">
<ul>
<li>
<a href="#">1차 메뉴 아이템</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템</a>
<ul>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템</a>
<ul>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
<li><a href="#">3차 메뉴 아이템</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
// CSS
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.menu-1 {
text-align: center;
}
.menu-1 > ul {
display: inline-block;
border-radius: 5px;
padding: 0 10px;
}
.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;
}
*/
.menu-1 ul > li:hover > ul {
display: block;
}
/* 3차 메뉴 작성 시 추가사항 */
/* 메뉴 색상 넣기 */
.menu-1 ul {
background-color: #dfdfdf;
}
/* 서브 메뉴 */
.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번째 1차 메뉴 아이템에 포함된 3차메뉴 (우측으로 표시되게 하기) */
.menu-1 > ul > li:first-child > ul ul {
right: auto;
left: 100%;
}
/* 메뉴 아이템 */
.menu-1 ul > li {
position: relative;
}
반응형