title: li Background Image Not Showing
body: <p>I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem.   Please could someone help, it is driving me insane.</p>
  
  <p>The below code is for my Site Navigation.  I would like the background to be an image rather than just a background colour.   I would also like the background image to change on hover.   As our Meerkat friends would say...Simples!....but not for me.</p>
  
  <pre><code>&lt;div class="sub-menu" id="sub-menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a class="on" href="#" title=" You Are Here "&gt;&amp;raquo; Overview&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="graduates-endorsements.html" title=" What Clients Say About The Programme "&gt;Endorsements&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="graduates-programme.html" title=" Programme Focus, Programme Leader and Venues "&gt;The Detail&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="graduates-funding.html" title=" Delegate Sponsored Places and Busaries "&gt;Funding&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="graduates-apply.html" title=" Online application Form "&gt;Apply Online&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="end" href="graduates-terms.html" title=" Terms &amp;amp; Conditions "&gt;Terms&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0;  border-top: solid 1px #FFFFFF; }
  #sub-menu ul { list-style: none; padding: 0; margin: 0; }
  #sub-menu li { float: left; margin: 0; }
  #sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
  #sub-menu li a:hover { color: #050505; background-color: #f3b607; }
  #sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
  #sub-menu li a.end { width: 89px; }
  #sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
  
  
  /* Hide from IE5-Mac \*/
  #sub-menu li a{ float: none }
  /* End hide */
  
  #sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
  </code></pre>
  
  <p>Thank you, I really appreciate your help.</p>