CSS image sprites for custom menu

Just wanted to share, because it took me some time to find the answer:

For a portfolio site, I wanted to create a menu with an image for each link, using a hover effect and image sprites. But I wanted the menu to be dynamic, so I could change around the order of my pages in my custom menu (inserted as a widget in my sidebar) and still have the right image refer to each link.

I had a hard time understanding how to call the IDs for each individual link in the custom menu. Turns out this is easy.

All you need is to find the number of your menu item. Once your menu is created, this number is unique and doesn’t change, even if you change the order in the menu. Find <li id=”menu-item-XX”> in the source code of your page, call it in your stylesheet, position your sprites accordingly and you are done.

Hope that helps anyone who searched for this like I did.