html - Improve categories sprite menu with responsiveness and title attribute

Question

I have something like

#categories{width:1042px;height:170px;margin:15px 0px 0px 0px;}
#categorieMenu{background:url(../images/categories.jpg) no-repeat;width:1042px;height:170px;margin:0;padding:0;}
#categorieMenu li,#categorieMenu a{height:170px;display:block;}
#categorieMenu li{float:left;list-style:none;display:inline;text-indent:-9999em;}
#categorie_1{width:174px;}
#categorie_2{width:175px;}
#categorie_3{width:174px;}
#categorie_4{width:175px;}
#categorie_5{width:174px;}
#categorie_6{width:170px;}
#categorie_1 a:hover{background:url(../images/categories.jpg) 0px -170px no-repeat;}
#categorie_2 a:hover{background:url(../images/categories.jpg) -174px -170px no-repeat;}
#categorie_3 a:hover{background:url(../images/categories.jpg) -349px -170px no-repeat;}
#categorie_4 a:hover{background:url(../images/categories.jpg) -523px -170px no-repeat;}
#categorie_5 a:hover{background:url(../images/categories.jpg) -698px -170px no-repeat;}
#categorie_6 a:hover{background:url(../images/categories.jpg) -872px -170px no-repeat;}

and an image categories.jpg

that changes depending on hover. It works fine however I would like to make it responsive and maybe a harder improvement to give tittle to each category as an attribute, so the name of category does not depend on the image title

How would the code look like to enable this attributes to this menu?

Here is the jsfiddle

How can I get something like the image:

I added only the last categorie "Employee Certification"

Answer 1

我做了一个小提琴检查

http://jsfiddle.net/Shinov/p88LW/

#categorie_1 {
 width:16.6%;   
}

#categorie_2 {
 width:16.6%;
}
#categorie_3 {
 width:16.6%;
}
#categorie_4 {
 width:16.6%;
}
#categorie_5 {
  width:16.6%;
}
#categorie_6 {
 width:16.6%;
}