title: Whats the correct CSS to apply to a YUI menu bar?
body: <p>I am trying to figure out the best way to use CSS sprites as header images for a <a href="http://developer.yahoo.com/yui/menu/" rel="nofollow noreferrer">YUI menu control</a>.</p>
  
  <p>I have a CSS sprite with the following CSS :</p>
  
  <pre><code>.navImg0{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -0px;}
  .navImg0:hover{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -23px;}
  .navImg1{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -0px;}
  .navImg1:hover{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -23px;}
  .navImg2{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -0px;}
  .navImg2:hover{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -23px;}
  .navImg3{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -0px;}
  .navImg3:hover{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -23px;}
  .navImg4{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -0px;}
  .navImg4:hover{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -23px;}
  </code></pre>
  
  <p>How can I apply this to a YUI menu?</p>
  
  <p>So far I've applied the navImg0, navImg1 etc. styles to the buttons. </p>
  
  <p>They come up in the right position but with a few problems:</p>
  
  <ul>
  <li>there are lines between the items and i need to ideal way to remove them</li>
  <li>when i rollover the button the correct rollover works, but then if i roll off the menu and onto the main part of the screen the button disappears</li>
  <li>the <code>&lt;a&gt;</code> tags under the <code>&lt;li&gt;</code> for each of the top level items doesnt work (theres no text inside anymore).</li>
  </ul>
  
  <p>They have a lot of documentation about applying CSS but I couldn't find any examples of how to use CSS Sprites as images.</p>