#navi3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*사용색상 : #ffe761 #092e20 #234f32 #326342*/
.navi {
width: 800px;
margin: 100px;
/*absolute의 위치가 전체에서 사용될 수 있도록 해당 위치에서 relative를 잡아줌*/
position: relative;
}
.navi>ul {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
.navi>ul>li {
float: left;
width: calc(100%/4);
height: 50px;
}
.navi>ul>li>a {
overflow: hidden;
/*a태그 밑줄 삭제*/
text-decoration: none;
/*a태그는 인라인 속성 -> 블럭 속성으로 변경하여 글씨가 아닌 칸을 선택해도 이동할 수 있도록 만듦*/
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 48px;
color: #092e20;
background-color: #ffe761;
}
/*프로그램 언어 태그에 마우스를 올렸을 때 초록 배경으로 변경*/
.navi>ul>li:hover>a {
color: #ffe761;
font-weight: bold;
background: #326342;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.sub {
overflow: hidden;
/*opacity로 줄 경우 가장 위에 위치한 HTML5 … 이 나타나게 된다. -> display 사용*/
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
}
.sub>li {
float: left;
}
/*프로그램 언어 태그에 마우스를 올렸을 때 상세 언어가 나오도록 함*/
.navi>ul>li:hover>a+.sub {
display: inline;
}
/*상세 언어 a태그 속성*/
.sub>li>a {
/*a태그 밑줄 삭제*/
text-decoration: none;
/*a태그는 인라인 속성 -> 블럭 속성으로 변경하여 글씨가 아닌 칸을 선택해도 이동할 수 있도록 만듦*/
display: block;
/*한개 씩 넓이 지정*/
width: 200px;
height: 100%;
text-align: center;
line-height: 48px;
color: #ffe761;
background-color: #234f32;
}
/* :first-child 형제 관계 태그 중 첫번째 태그 선택*/
.sub>:first-child>a {
border-bottom-left-radius: 10px;
}
/* :last-child 형제 관계 태그 중 마지막 태그 선택*/
.sub>:last-child>a {
border-bottom-right-radius: 10px;
}
.sub>li>a:hover {
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>가로탭 메뉴 만들기</h1>
<hr>
<div class="navi">
<ul>
<li>
<a href="#">프로그램 언어</a>
<ul class="sub">
<li><a href="#">JAVA</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
<li><a href="#">데이터베이스</a></li>
<li><a href="#">FrontEnd</a>
<ul class="sub">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">게시판</a></li>
</ul>
</div>
</body>
</html>'CSS' 카테고리의 다른 글
| 카카오 오븐 (0) | 2020.10.15 |
|---|---|
| 문제 및 실습 (navi(4)-아코디언 메뉴) (0) | 2020.10.15 |
| 문제 및 실습 (navi(2)-드롭다운 메뉴) (0) | 2020.10.15 |
| 문제 및 실습 (navi(1)-기본 메뉴) (0) | 2020.10.15 |
| 문제 및 실습 (갤러리) (0) | 2020.10.15 |