毎回手書きしなおすと
何かが足りず ブラウザ間でトラブルになったり
無駄に長くなるCSS
覚書きして、これを使うのがBETTER！！
ｈｔｍｌ
<div id="globalnavi"> <ul> <li id="menu1"><a href="#">Home</a></li> <li id="menu2"><a href="#">menu</a></li> <li id="menu3"><a href="#">menu</a></li> <li id="menu4"><a href="#">menu</a></li> <li id="menu5"><a href="#">menu</a></li> <li id="menu6"><a href="#">menu</a></li> <li id="menu7"><a href="#">menu</a></li> </ul> </div>
CSS
#globalnavi{
margin: 0;
padding: 0;
width: ***;
height: 40px;
}
#globalnavi ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#globalnavi li{
text-indent: -9999px;
float:left;
width: 100px;
margin: 0;
padding: 0;
}
#globalnavi a{
display: block;
width: 100%;
height: 40px;
background-image: url(画像のパス);
background-repeat: no-repeat;
}
#menu1 a{background-position: 0 0;}
#menu2 a{background-position: -100px 0;}
#menu3 a{background-position: -200px 0;}
#menu4 a{background-position: -300px 0;}
#menu5 a{background-position: -400px 0;}
#menu6 a{background-position: -500px 0;}
#menu7 a{background-position: -600px 0;}
#globalnavi a:hover{
background-image: url(画像のパス);
background-repeat: no-repeat;
}
#menu1 a:hover{background-position: 0 -40px;}
#menu2 a:hover{background-position: -100px -40px;}
#menu3 a:hover{background-position: -200px -40px;}
#menu4 a:hover{background-position: -300px -40px;}
#menu5 a:hover{background-position: -400px -40px;}
#menu6 a:hover{background-position: -500px -40px;}
#menu7 a:hover{background-position: -600px -40px;}