Here is the menu icon coding I'm using:
Code:
/* Part 1- for default state: */ #menu1 .page-reviews > a > i { background-position: 0px -336px; } #menu1 .page-landman-books > a > i { background-position: 0px -2112px; } #menu1 .page-jobs > a > i { background-position: 0px -1272px; } #menu1 .page-advertise-with-us > a > i { background-position: 0px -888px; } #menu1 .page-contact-us > a > i { background-position: 0px -96px; } /* Part 2 - for hover state: */ #menu1 .page-reviews:hover > a > i, #menu1 .page-reviews.active > a > i { background-position: -24px -336px; } #menu1 .page-landman-books:hover > a > i, #menu1 .page-landman-books.active > a > i { background-position: -24px -2112px; } #menu1 .page-jobs:hover > a > i, #menu1 .page-jobs.active > a > i { background-position: -24px -1272px; } #menu1 .page-advertise-with-us:hover > a > i, #menu1 .page-advertise-with-us.active > a > i { background-position: -24px -888px; } #menu1 .page-contact-us:hover > a > i, #menu1 .page-contact-us.active > a > i { background-position: -24px -96px; }
Any suggestions on how to make them display the correct icon?