Joomla Image Menu CSS

/*CSS SPRITE IMAGE MENU*/

/*BASIC LIST STYLING*/

ul#menuimageid {
    height: 100px;
    list-style-type: none;
    margin: 0 0 25px;
    padding: 0;
    border: none;
    background-color: transparent;
    overflow: visible;
    }

ul#menuimageid li {
    text-indent: -9999px;
    width:160px;
    height:100px;
    float:left;
    display:block;
    margin: 0;
    padding: 0;
    border: none;
    }

/*END BASIC LIST STYLING*/

/*BASIC LINK STYLING*/

ul#menuimageid li a {
    width:160px;
    height:100px;
    display:block;
    margin: 0;
    padding: 0;
    border: none;
    background:url('../../../images/Menu-sprite2.png') 0 0;
    }

/*END BASIC LINK STYLING*/

/*IMAGE LINK VISITED/LINK STYLES -First number is horizontal, second number is vertical */

ul#menuimageid li a.menustyle1:link,
ul#menuimageid li a.menustyle1:visited {
    background-position: 0 0;
    }

ul#menuimageid li a.menustyle2:link,
ul#menuimageid li a.menustyle2:visited {
    background-position: -180px 0;
    }

ul#menuimageid li a.menustyle3:link,
ul#menuimageid li a.menustyle3:visited {
    background-position: -360px 0;
    }

ul#menuimageid li a.menustyle4:link,
ul#menuimageid li a.menustyle4:visited {
    background-position: -540px 0;
    }

ul#menuimageid li a.menustyle5:link,
ul#menuimageid li a.menustyle5:visited {
    background-position: -720px 0;
    }

ul#menuimageid li a.menustyle6:link,
ul#menuimageid li a.menustyle6:visited {
    background-position: -900px 0;
    }

/*END IMAGE LINK VISITED/LINK STYLES*/

/*IMAGE LINK HOVER STYLES -THis part makes the rollover happen. First number is horizontal, second number is vertical */

ul#menuimageid li a.menustyle1:hover {
    background-position: 0 -100px;
    }

ul#menuimageid li a.menustyle2:hover {
    background-position: -180px -100px;
    }

ul#menuimageid li a.menustyle3:hover {
    background-position: -360px -100px;
    }

ul#menuimageid li a.menustyle4:hover {
    background-position: -540px -100px;
    }

ul#menuimageid li a.menustyle5:hover {
    background-position: -720px -100px;
    }

ul#menuimageid li a.menustyle6:hover {
    background-position: -900px -100px;
    }

/*END IMAGE LINK HOVER STYLES*/