#menu {display:block; width:758px; margin-left:auto; margin-right:auto; font-size:80%;}

/* 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 {float:left;}

/* Step 5 - Adding the initial images */

#menu li.home {background:transparent url(images/menu01Off_home.gif);}
#menu li.products {background:transparent url(images/menu02Off_products.gif);}
#menu li.shoppingCart {background:transparent url(images/menu05Off_cart.gif);}
#menu li.news {background:transparent url(images/menu04Off_news.gif);}
#menu li.faq {background:transparent url(images/menu04Off_faqs.gif);}
#menu li.exLinks {background:transparent url(images/menu06Off_exLinks.gif);}
#menu li.contacts {background:transparent url(images/menu07Off_contacts.gif);} 

/* Step 6 - General link styling */

#menu a {display:block; height:0; padding-top:25px; color:#000; overflow:hidden;}

/* hack for older versions of IE with incorrect box model */

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

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

#menu a#home1 {background:transparent url(images/menu01On_home.gif) -130px -90px no-repeat; width:90px;}
#menu a#products2 {background:transparent url(images/menu02On_products.gif) -130px -90px no-repeat; width:112px;}
#menu a#cart5 {background:transparent url(images/menu05On_cart.gif) -130px -90px no-repeat; width:140px;}
#menu a#news4 {background:transparent url(images/menu04On_news.gif) -130px -90px no-repeat; width:81px;}
#menu a#faq4 {background:transparent url(images/menu04On_faqs.gif) -130px -90px no-repeat; width:81px;}
#menu a#exLinks6 {background:transparent url(images/menu06On_exLinks.gif) -130px -90px no-repeat; width:139px;}
#menu a#contacts7 {background:transparent url(images/menu07On_contacts.gif) -130px -90px no-repeat; width:115px;}

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

#menu a#home1:hover {background-position:0 0; z-index:50;}
#menu a#products2:hover {background-position:0 0; z-index:50;}
#menu a#cart5:hover {background-position:0 0; z-index:50;}
#menu a#news4:hover {background-position:0 0; z-index:50;}
#menu a#faq4:hover {background-position:0 0; z-index:50;}
#menu a#exLinks6:hover {background-position:0 0; z-index:50;}
#menu a#contacts7:hover {background-position:0 0; z-index:50;}

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