Web/CSS

[css] 서브메뉴 만들기

뉴비뉴 2019. 1. 23.

#nav{

z-index: 200; /*뎁스 depth값을 설정*/

position: relative; /**/

}

.navigation_list{

float: left; // 아래로 정렬되던 것을 아래 ex) 와 같이 옆으로 출력

width: 142px; // 네비게이션 간의 길의 조절 ex) 메뉴1 메뉴2 메뉴3 메뉴4

line-height: 40px; /* 텍스트를 상하로 가운데 정렬하는 속성*/

text-align: center; /* 가운데 정렬 */

}

.navigation_link{

font-size: 16px; // 메뉴1 메뉴2 메뉴3 의 크기를 조절

color: #00ab33; // 색상을 조절

}

.sub_menu{

width: 100%; // 서브메뉴 나올것의 길이

height: 100px; // 높이 조절

background: #ff0; // 색상 조절

position: absolute; // ?? #nav 와 관련

top: 40px; // 서브메뉴가 떳을 때 메뉴들과 겹치면 안되므로 윗 공간px설정

left: 0; /*어느지점을 기점으로해서 위 엘리먼트의 위치값을 바꿀것인지*/

display: none; // 평소에는 서브메뉴가 안뜨게 설정

}

.navigation_list:hover .sub_menu{ /*네비게이션 리스트에 종속 된 서브메뉴를 나오게하라*/

display: block; // 나오게 설정

}

</style>

</head>

<body>

<div id = "header">

<div class = "header_inner">header

</div>

<div id = "nav">

<div class = "nav_inner">

<ul class ="navigation" "clearfix">

<li class="navigation_list">

<a href="" class="navigation_link">메뉴1</a>

<div class="sub_menu"> // 해당 클래스를 다른 메뉴 2 3 4 에도 넣으면 똑같이 사용가능

sub_menu1

</div>

</li>

<li class="navigation_list"><a href="" class="navigation_link">메뉴2</a></li>

<li class="navigation_list"><a href="" class="navigation_link">메뉴3</a></li>

<li class="navigation_list"><a href="" class="navigation_link">메뉴4</a></li>

<li class="navigation_list"><a href="" class="navigation_link">메뉴5</a></li>

<li class="navigation_list">

<a href="" class="navigation_link">메뉴6</a>

<div class="sub_menu">

sub_menu6

</div>

</li>

<li class="navigation_list"><a href="" class="navigation_link">메뉴7</a></li>

</ul>

</div>

'Web > CSS' 카테고리의 다른 글

[css] 박스 모델, 중복의 제거, display:inline, block (0)	2019.01.29
[css] HTML 과 CSS 구분 (0)	2019.01.23
[css] clearfix, 텍스트 위아래로 가운데 정렬, 가운데 정렬, 선 긋기 (0)	2019.01.23
[css] 배경처리 후 글자 위치 조정 (0)	2019.01.22
[css] 간단한 레이아웃 만들기 (0)	2019.01.22

[css] 서브메뉴 만들기

'Web > CSS' 카테고리의 다른 글

댓글

💲 추천 글

티스토리툴바