Sub menu styling
Add submenu items to #sidebar 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 ***/.
Add border and font styles to #sidebar
#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; }
Actual width of the area that the contents of other boxes cannot invade is calculated as width + left/right padding sum + left/right border sum. So, changed the width property of #sidebar with left/right padding sum of 0 and left/right border sum of 2px from 175px to 173px.
position: relative and top: 7px moves #sidebar box down by 7px from its original position. If #sidebar moves down, #sidebar invades #footer. So, added margin-bottom: 20px so that #sidebar does not invade #footer.
Add the following to /*** The Essential Code ***/ to style the category (main menu) to which the submenus belong at #sidebar.
#sidebar > h1 { margin: 0; padding: 14px; background: #92B91C; color: #FFF; font-size: 16px; }
Styling submenu items at #sidebar
Add the following to /*** The Essential Code ***/.
#sidebar > ul { margin: 0; padding: 0; list-style-type: none; }
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%; }
The a is an inline element, but it becomes a box element and links the entire box area to other documents if you add display: block.
References