java-school logo

서브 메뉴

왼쪽에 위치시킨 #sidebar 엘리먼트에 아래와 같이 서브 메뉴를 추가한다.

<div id="sidebar">

	<h1>Eclipse</h1>
	<ul>
		<li><a href="#">Eclipse Tutorial</a>
			<ul>
				<li><a href="#">Eclipse 설치</a></li>
				<li><a href="#">WTP 설치</a></li>
			</ul>
		</li>
	</ul>
	
</div>

/*** Just for Looks ***/의 #sidebar 설정은 제거한다.

예제보기 1

서브 메뉴의 보더(border)와 폰트(font)

#sidebar {
	float: left;
	width: 173px;
	margin-left: -1000px;
	border: 1px solid #DAEAAA;
	font-family: Verdana, sans-serif;
	font-size: 12px;
}

마진과 패딩이 없는 엘리먼트가 실제 차지하는 넓이는 'width + 좌우 보더 합'으로 계산된다. #sidebar가 175px의 넓이여야 한다면, 좌우 보더 합이 2px이므로 175px에서 173px로 width를 변경했다.

#sidebar h1

서브 메뉴 머릿말에 해당하는 h1 엘리먼트의 스타일을 다음과 같이 추가한다.

#sidebar h1 {
	margin: 0;
	padding: 14px;
	background: #92B91C;
	color: #FFF;
	font-size: 16px;
}

예제보기 2

#sidebar ul

서브 메뉴 리스트 항목의 마진과 패딩과 디폴트 스타일을 제거한다.

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

예제보기 3

#sidebar a

서브 메뉴의 링크에 대한 스타일을 아래와 같이 추가한다.

#sidebar a {
	display: block;
	padding: 6px 10px 6px 10px;
	color: #64615D;
	background: #DAEAAA;
	text-decoration: none;
	font-weight: bold;
}
#sidebar a:hover {
	background-color: #EDFEBA;
	color: #64615D;
}

예제보기 4

a는 인라인(inline) 엘리먼트지만 display: block으로 설정하면 상자(box)가 되어 상자 영역 전체에 링크가 걸리게 된다.

#sidebar li li a

마지막으로 실제적인 서브 메뉴 아이템의 안의 링크에 대한 스타일을 아래와 같이 추가한다.

#sidebar li li a {
	display: block;
	color: #64615D;
	padding: 5px 3px 4px 17px;
	text-decoration: none;
	border-bottom: 1px solid #FFF;
	font-weight: normal;
	background: #FFF url('../images/circle.gif') no-repeat 5% 50%;
}

예제보기 5

참고