Sub menu styling

Add the submenu item to the #sidebar element as shown below.

<div id="sidebar">
	<h1>Eclipse</h1>
	<ul>
		<li class="sub-heading">Introduction</li>
		<li><a href="#">Features</a></li>
		<li><a href="#">Object & Class</a></li>
	</ul>
</div>

Delete #sidebar in /*** Just for Looks ***/.

Sub menu 1

Add a border and font style to the submenu

Modify #sidebar as shown below.

#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;
}

The actual width of the element without margin and padding is calculated as 'width + left / right border sum'.
Since the left / right border sum is 2px, I changed the width from 175px to 173px.
position: relative and top: 7px moves the #sidebar box down by 7px from its original position.
If #sidebar moves down, #sidebar can invade #footer.
So I added margin-bottom: 20px so that #sidebar does not invade #footer.

#sidebar > h1

Add the following to /*** The Essential Code ***/.

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

Sub menu 2

#sidebar > ul

Add the following to /*** The Essential Code ***/.

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

Sub menu 3

Styling submenu items

Add the following to /*** 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 is an inline element, but if you add display: block to a it becomes a box and links to the entire box area.

Sub menu Final

References