treehouse : what would you like to learn today?
Web Design Web Development iOS Development

nav dropdown li background images

  • I am using Chris' simple jQuery dropdown menu (which works fantastic) but instead of styled text I am using images for the individual li's. This works great on the top level li's, but I am having an issue with the dropdown li's.

    You can view the site at http://dev.rjmccollam.com/site/

    I have a feeling (and am hoping) it is a simple value that needs to be added, but I have been toying around with it for awhile and getting nowhere.

    Thanks for your help!
  • The very first thing is in your PNGs sprites: they all need to have the same height (21px x 3 states= 63px tall). If you aren´t using 3 states then your images must have 42px height. In this case you´ll need something like this:

    li.kukuna a {
    background:url("images/kukuna.png") repeat scroll center top transparent;
    }
    li.kukuna a:hover {
    background:url("images/kukuna.png") repeat scroll center bottom transparent;
    }

    Repeat this in every other links:
    Cheers