ボタン制作｜縦組＠10月14日

SS Spriteの縦型の練習。縦51PXで作ってみました。

@charset"UTF-8";

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #fff;
}
#nav {
    width: 200px;
    height: auto;
    margin: 50px 0 0 50px;
}
#nav ul{
     list-style-type: none;
  
}
#nav li{
    float: left;
}

#nav li a{
    width: 200px;
    height: 50px;
    display: block; 
    text-decoration: none;
    background-image: url(../images/02.png);
    background-repeat: no-repeat;
}

#nav img: {
    border: 0;
}
#nav li em {
  visibility: hidden;
}


/*individual*/
#nav li#ai a{
    background-position: left 0;
}
#nav li#ai a:hover,li#ai a:active {
    background-position: -220px 0;
}
#nav li#ps a{
    background-position: 0 -50px;
}
#nav li#ps a:hover,li#ps a:active{
    background-position: -220px -50px;
 }
#nav li#hcss a {
  background-position: 0 -100px;
}

#nav li#hcss a:hover,li#hcss a:active {
    background-position: -220px -100px;
}
#nav li#dwea a{
    background-position: 0 -150px;
}
#nav li#dwea a:hover,li#dwea a:active {
    background-position: -220px -150px;
}
#nav li#fla a{
    background-position: 0 -200px;
}
#nav li#fla a:hover,li#fla a:active {
    background-position: -220px -200px;