서브 메뉴 스타일 지정

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

<div id="sidebar">
	<h1>Eclipse</h1>
	<ul>
		<li class="sub-heading">자바 소개</li>
		<li><a href="#">자바의 특징</a></li>
		<li><a href="#">객체와 클래스</a></li>
	</ul>
</div>

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

예제보기 1

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

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

마진과 패딩이 없는 엘리먼트가 실제 차지하는 넓이는 'width + 좌우 보더 합'으로 계산된다.
#sidebar가 175px의 넓이여야 한다면, 좌우 보더 합이 2px이므로 175px에서 173px로 width를 변경했다.
position: relative;와 top: 7px;은 #sidebar 박스를 #container 위 경계에서 아래로 7px만큼 아래로 이동시킨다.
박스를 아래로 움직이면 #sidebar가 #footer를 침범할 수 있다.
#sidebar가 #footer를 침범하지 않도록 margin-bottom: 20px을 추가했다.

#sidebar > h1

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

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

예제보기 2

#sidebar > ul

다음을 /*** The Essential Code ***/에 추가한다. 

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

예제보기 3

서브 메뉴 아이템 스타일

/*** The Essential Code ***/에 다음을 추가한다. 

#sidebar > ul > li.sub-heading {
    display: block;
    padding: 6px 10px 6px 10px;
    color: #64615D;
    background: #DAEAAA;
    text-decoration: none;
    font-weight: bold;
}
sidebar > ul > li > a:hover {
	background-color: #EDFEBA;
	color: #64615D;
}
#sidebar > ul > 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%;
}

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

예제보기 5

참고