Horizontal Menu in CSS

Create a folder for all the menu button images within your current project folder and put all your menu button images in it. These include 2 sets of images. One set is for 'on mouse over' and the other set is for 'on mouse out'.
In this demo I have used the following menu button images:
set1 - home_on.jpg, about_us_on.jpg, products_on.jpg, services_on.jpg – for 'on mouse over' and
set2 - home_off.jpg, about_us_off.jpg, products_off.jpg, services_off.jpg – for 'on mouse out'
Place the following CSS code between <style></style> in your current html page within the <head></head> section or place it in an external CSS file and call that file from your current html / php page

  body{margin:0px; padding:0px;}
  #menu_container{width:615px; margin-left:auto; margin-right:auto;}
  #menu_container ul{margin:0px; padding:0px; list-style:none; text-indent:-10000px;}
  #menu_container li{display:inline;}
  #menu_container li.home a{background:url(images/home_off.jpg) no-repeat 0 0; width:150px; height:40px; float:left; display:block;}
  #menu_container li.home a:hover{background:url(images/home_on.jpg) no-repeat 0 0;}
  #menu_container li.about_us a{background:url(images/about_us_off.jpg) no-repeat 0 0; width:150px; height:40px; float:left; display:block; margin-left:5px;}
  #menu_container li.about_us a:hover{background:url(images/about_us_on.jpg) no-repeat 0 0;}
  #menu_container li.products a{background:url(images/products_off.jpg) no-repeat 0 0; width:150px; height:40px; float:left; display:block; margin-left:5px;}
  #menu_container li.products a:hover{background:url(images/products_on.jpg) no-repeat 0 0;}
  #menu_container li.services a{background:url(images/services_off.jpg) no-repeat 0 0; width:150px; height:40px; float:left; display:block; margin-left:5px;}
#menu_container li.services a:hover{background:url(images/services_on.jpg) no-repeat 0 0;}

Place the following HTML code between <body></body> in your current html page

<div id="menu_container">
<ul>
<li class="home"><a href="#">home</a></li>
<li class="about_us"><a href="#">about us</a></li>
<li class="products"><a href="#">products</a></li>
<li class="services"><a href="#">services</a></li>
</ul>
</div>

Notes