#navi4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*사용색상 : #50021b #d7e2e9 #ffcb35 #1f4864 #e95c40 #ffffff*/
.navi {
width: 200px;
margin: 100px;
}
.navi>ul {
list-style: none;
margin: 0;
padding: 0;
}
.navi>ul>li>a {
/*a태그 밑줄 삭제*/
text-decoration: none;
/*a태그는 인라인 속성 -> 블럭 속성으로 변경하여 글씨가 아닌 칸을 선택해도 이동할 수 있도록 만듦*/
display: block;
border: 2px solid #ffffff;
width: 100%;
height: 100%;
line-height: 48px;
color: #d7e2e9;
background-color: #50021b;
padding-left: 30px;
}
/*프로그램 언어 태그에 마우스를 올렸을 때 초록 배경으로 변경*/
.navi>ul>li:hover>a {
color: #1f4864;
font-weight: bold;
text-shadow: 2px 2px 2px #d7e2e9;
background: #ffcb35;
}
.sub {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
/*프로그램 언어 태그에 마우스를 올렸을 때 상세 언어가 나오도록 함*/
.navi>ul>li:hover>a+.sub {
display: block;
}
/*상세 언어 a태그 속성*/
.sub>li>a {
/*a태그 밑줄 삭제*/
text-decoration: none;
/*a태그는 인라인 속성 -> 블럭 속성으로 변경하여 글씨가 아닌 칸을 선택해도 이동할 수 있도록 만듦*/
display: block;
border: 2px solid #ffffff;
/*한개 씩 넓이 지정*/
width: 100%;
height: 50px;
line-height: 48px;
color: #ffffff;
background-color: #e95c40;
padding-left: 30px;
}
.sub>li>a:hover {
font-weight: bold;
/*text-shadow : (offset-x수평거리) (offset-y수직거리) (blur-radius흐림정도) (color)*/
text-shadow: 2px 2px 2px gray;
background-color: #1f4864;
}
</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' 카테고리의 다른 글
| 문제 및 실습 (Lee's World) (0) | 2020.10.16 |
|---|---|
| 카카오 오븐 (0) | 2020.10.15 |
| 문제 및 실습 (navi(3)-가로탭 메뉴) (0) | 2020.10.15 |
| 문제 및 실습 (navi(2)-드롭다운 메뉴) (0) | 2020.10.15 |
| 문제 및 실습 (navi(1)-기본 메뉴) (0) | 2020.10.15 |