• Step 1
• Step 2
• Step 3
• Step 4

• Step 1
• Step 2
• Step 3
• Step 4

• Step 1
• Step 2
• Step 3
• Step 4

• Step 1
• Step 2
• Step 3
• Step 4

• Step 1
• Step 2
• Step 3
• Step 4

HTML

• <ul id="green_and_orange_step_menu">
• <li class="frist ">Step 1</li>
• <li>Step 2<span></span></li>
• <li>Step 3<span></span></li>
• <li class="last">Step 4<span></span></li>
• </ul>
• <div style="clear:both;"></div>
• <ul id="green_and_orange_step_menu">
• <li class="frist fdone">Step 1</li>
• <li class="inprogress">Step 2<span></span></li>
• <li>Step 3<span></span></li>
• <li class="last">Step 4<span></span></li>
• </ul>
• <div style="clear:both;"></div>
• <ul id="green_and_orange_step_menu">
• <li class="frist fdone">Step 1</li>
• <li class="done">Step 2<span></span></li>
• <li class="inprogress">Step 3<span></span></li>
• <li class="last">Step 4<span></span></li>
• </ul>
• <div style="clear:both;"></div>
• <ul id="green_and_orange_step_menu">
• <li class="frist fdone">Step 1</li>
• <li class="done">Step 2<span></span></li>
• <li class="done">Step 3<span></span></li>
• <li class="last lastinprogress">Step 4<span></span></li>
• </ul>
• <div style="clear:both;"></div>
• <ul id="green_and_orange_step_menu">
• <li class="frist fdone">Step 1</li>
• <li class="done">Step 2<span></span></li>
• <li class="done">Step 3<span></span></li>
• <li class="last ldone">Step 4<span></span></li>
• </ul>

CSS

• <style>
• #green_and_orange_step_menu { margin:0; padding:5px; display:inline-table; list-style:none; }
• #green_and_orange_step_menu li{ display:inline; float:left; background:url(images/step_orange_green.gif) no-repeat -50px bottom; height:41px; line-height:41px; font-size:11px; padding:0 30px 0 25px; position:relative;}
• #green_and_orange_step_menu li span{ margin:0px; z-index:2000; background:url(images/step_orange_green.gif) no-repeat left bottom; display:block; position:absolute; height:41px; line-height:41px; width:13px; top:0; left:-10px; padding:0;}
• #green_and_orange_step_menu li.inprogress { background-position:-50px 0px}
• #green_and_orange_step_menu li.inprogress span, #green_and_orange_step_menu li.lastinprogress span{background-position:left 0px }
• #green_and_orange_step_menu li.done {background-position: -50px -41px}
• #green_and_orange_step_menu li.done span, #green_and_orange_step_menu li.ldone span {background-position:left -41px }
• #green_and_orange_step_menu li.frist, #green_and_orange_step_menu li.done, #green_and_orange_step_menu li.inprogress, #green_and_orange_step_menu li.ldone, #green_and_orange_step_menu li.lastinprogress { color:#FFF;}
• #green_and_orange_step_menu li.frist {background-position: -20px 0px }
• #green_and_orange_step_menu li.fdone { background-position: -20px -41px }
• #green_and_orange_step_menu li.last {background-position: right bottom }
• #green_and_orange_step_menu li.lastinprogress { background-position: right 0}
• #green_and_orange_step_menu li.ldone { background-position: right -41px}
• </style>

Browser Compatability

• FireFox
• IE7
• Safari
• Opera