/* Step 10 - Clearing the float */
#menu {display:block; width:150px; background-color:#D6EFF4;}

/* Step 3 - get rid of the bullets and margin */
#menu ul {margin:0; padding:0; list-style-type:none;}

/* Step 4 and 7 - make the list horizontal and giving a 1px gap */
#menu li {}

/* Step 5 - Adding the initial images */

#menu li.list1 {background:transparent url(../images/nav/nav-home.png);}
#menu li.list2 {background:transparent url(../images/nav/nav-about.png);}
#menu li.list3 {background:transparent url(../images/nav/nav-com.png);}
#menu li.list4 {background:transparent url(../images/nav/nav-forms.png);}
#menu li.list5 {background:transparent url(../images/nav/nav-sba.png);}
#menu li.list6 {background:transparent url(../images/nav/nav-sub.png);}
#menu li.list7 {background:transparent url(../images/nav/nav-contact.png);} 

/* Step 6 - General link styling */

#menu a {display:block; width:150px; height:0; padding-top:35px; color:#000; overflow:hidden;}
#menu a#item1 {display:block; width:150px; height:0; padding-top:40px; color:#000; overflow:hidden;}
/* hack for older versions of IE with incorrect box model */

* html #menu a:link, * html #menu a:visited {height:35px; he\ight:0;}
* html #menu a:link#item1, * html #menu a:visited#item1 {height:40px; he\ight:0;}

/* Step 8 - Adding the background images to the link tags */

#menu a#item1 {background:transparent url(../images/nav/nav-home-on.png) -42px -160px no-repeat;}
#menu a#item2 {background:transparent url(../images/nav/nav-about-on.png) -130px -90px no-repeat;}
#menu a#item3 {background:transparent url(../images/nav/nav-com-on.png) -130px -90px no-repeat;}
#menu a#item4 {background:transparent url(../images/nav/nav-forms-on.png) -130px -90px no-repeat;}
#menu a#item5 {background:transparent url(../images/nav/nav-sba-on.png) -130px -90px no-repeat;}
#menu a#item6 {background:transparent url(../images/nav/nav-sub-on.png) -130px -90px no-repeat;}
#menu a#item7 {background:transparent url(../images/nav/nav-contact-on.png) -130px -90px no-repeat;}

/* Step 9 - Adding the :hover style */

#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}
#menu a#item3:hover {background-position:0 0; z-index:50;}
#menu a#item4:hover {background-position:0 0; z-index:50;}
#menu a#item5:hover {background-position:0 0; z-index:50;}
#menu a#item6:hover {background-position:0 0; z-index:50;}
#menu a#item7:hover {background-position:0 0; z-index:50;}

* html #menu a:hover {height:35px; he\ight:0;}
* html #menu a:hover#item1 {height:40px; he\ight:0;}