title: how to style an horizontal menu with images on top and centered text?
body: <p>By taking into consideration the following image, representing the 3 states of this menu interaction:</p>
  
  <p><img src="https://i.stack.imgur.com/ow6Hg.jpg" alt="horizontal menu with 3 states"></p>
  
  <p>And knowing that:</p>
  
  <p><strong>1)</strong> We cannot have one image for all the horizontal menu, each item, (so, each ul li a) should have their own image;</p>
  
  <p><strong>2)</strong>
  background image positioning will be favored since it will be better regarding cross-browser issues;</p>
  
  <p><strong>3)</strong>
  The text on those buttons (should be) text and not an image;</p>
  
  <p><strong>What would be the best way for achieving this ?</strong> 
  I just need a kick off here. </p>
  
  <p>Thanks.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Here's a test with no swapping images:
  <a href="http://jsfiddle.net/Cq5JY/" rel="nofollow noreferrer">http://jsfiddle.net/Cq5JY/</a></p>