/*기본 스타일 그냥 준비 작업*/
.Wrap {margin:0 auto;width:130px;}
/*
가장 일반적인 방법으로 배경이미지만 쓰는 방식으로 메뉴 내용을 텍스트로 하고 배경만 바꿔주는 방식.
가장 쉽고 간단하며 일관성있다.
*/
#type1 {padding:0;}
  #type1 li {width:120px;height:25px;overflow:hidden;list-style:none}
    #type1 li a {display:block;width:250px;height:25px;line-height:25px;text-align:left;background:url('./images/menu.gif') no-repeat;}
    #type1 li a.active,
    #type1 li a:hover {background-position: 0 -25px;}


/*
디자인상의 이유로 텍스를 사용하지 않고 이미지로만 사용해야 할때 주로 사용하는 방식
또한 메뉴별로 크기가 다를 때 사용하기도 하는 방식.
다만 메뉴별로 일일이 지정 해줘야 해서 매뉴가 많아지면 코드도 많아 진다.
디자이너에게 싫은 소리 안해도 된다.
*/
#type2 {padding:0;}
  #type2 li {width:50px;height:25px;overflow:hidden;list-style:none}
    #type2 li a {display:block;padding-top:25px;width:50px;height:25px;line-height:25px;text-align:center;}
    #type2 li.m1 a {background:url('./m1.gif') no-repeat 0 0;}
    #type2 li.m2 a {background:url('./m2.gif') no-repeat 0 0;}
    #type2 li.m3 a {background:url('./m3.gif') no-repeat 0 0;}
    #type2 li a.active,
    #type2 li a:hover {background-position: 0 -25px !important;}


/*
앵커 태그(<a>)를 사용하지 않고 이미지만을 사용하고자 할때 사용하는 방식으로 주로 겸손한 자바스크립트 사용할때 쓰면 편하다.
*/
#type3 {padding:0;}
  #type3 li {position:relative;width:50px;height:25px;overflow:hidden;list-style:none}
    #type3 li img {position:absolute;left:0;top:0;cursor:pointer;}
    #type3 li img.active,
    #type3 li img:hover {top:-25px;}