#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="body"></div>-->
<div id = "header">
<div class = "header_inner">header
</div>
</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 |
댓글