Treehouse: Grow your CSS skills. Land your dream job.

nav dropdown li background images

  • # August 19, 2010 at 4:34 pm

    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

    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!

    # August 20, 2010 at 2:00 pm

    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:

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.