CSS Code

This is a view of the code used for the css menu.  You will need to make sure that the paths to the images within this code are either relative or direct to wherever you store the image files on your site.

<style type="text/css">
#foxmenucontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}
#foxmenu{position:relative;display:block;height:24px;font-size:11px;font-weight:bold; font-family:Arial,Verdana,Helvitica,sans-serif;}
#foxmenu ul{margin:0;padding:0;list-style-type:none;width:auto;}
#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}
#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none; padding:5px 20px 0 20px;height:19px; background:transparent url(images/foxmenu_bg-OFF.gif) no-repeat top left;}
#foxmenu ul li a:hover{color:#fff; background:transparent url(images/foxmenu_bg-OVER.gif) no-repeat top right;}
#foxmenu ul li a.current,#foxmenu ul li a.current:hover{color:#000;background:#fff;}
</style>

HTML Code

As you can see, you will need to wrap your unordered list with a div to identify the menu style.  The "services" tab has the ON state by adding the "current" class to the A tag.

<div id="foxmenucontainer">
<div id="foxmenu">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="" class="current">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div>
</div>

FAQ

• The background color can be changed in the style sheet - the button colors changed in the Photoshop file.
• This menu comes with the original Photoshop file.
• You can customize this menu to be any color you wish.
• Entire menu system is less than 3KB.
• 2 image files, 1 css file, 1 html file
• Has been tested and works in over 150 browser/operating system combos
• It's FREE for you to use