html - 使用响应性和标题属性改进类别 sprite 菜单

Question

我有类似的东西

#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;}

和一张图片categories.jpg

这取决于悬停。它工作正常但是我想让它响应并且可能更难改进以将标题作为属性赋予每个类别，因此类别名称不依赖于图像标题

为该菜单启用该属性的代码看起来如何？

Here is the jsfiddle

我怎样才能得到像图像这样的东西:

我只添加了最后一个类别“员工认证”

Answer 1

我已经做了一个 fiddle 检查

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%;
}