korean

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 ***/.

Sub menu 1

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

Sub menu 2

Styling submenu items at #sidebar

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

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

Sub menu 3

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.

Sub menu Final

References