css, 롤오버 메뉴 이미지 > html

<style type="text/css">
/*navi영역, navi_s라는 클래스,  li의 설정*/
.navi {background:#6699ff;width:740px;overflow:hidden;}
.navi_s {overflow:hidden;height:70px;list-style:none;float:left;margin:0;width:740px;padding:0}
.navi_s li {float:left;width:100px;}
.navi_s li a span {display:none;}
.navi_s li a {background:url(navi.gif) no-repeat;}
.navi_s li a {height:70px;width:100px;display:block;}

 

/*백그라운드 이미지의 포지션설정*/
.navi .n01 a {width:80px;background-position:-80px 0px;}
.navi .n01 a:hover {width:80px;background-position:-80px -65px;}

.navi .n02 a {width:92px;background-position:-176px -0px;}
.navi .n02 a:hover {width:92px;background-position:-176px -65px;}
.navi .n02 a:current, a.current:hover {width:92px;background-position:-176px -65px;}

.navi .n03 a {width:86px;background-position:-280px -0px;}
.navi .n03 a:hover {width:86px;background-position:-280px -65px;}

.navi .n04 a {width:100px;background-position:-380px -0px;}
.navi .n04 a:hover {width:100px;background-position:-380px -65px;}
</style>

<div class="navi">
 <ul class="navi_s"><!--navi_s의 클래스로 width값 height값 배경색상을 지정해줌 속해있는 li값도 미리 설정-->
  <li class="n01"><a href="?menu=1"><span>메뉴1</span></a></li><!--클래스 n01로 속해있는 a태그의 백그라운드 포지션변경-->
  <li class="n02"><a href="?menu=2" class="current"><span>메뉴2</span></a></li><!--a:hover시엔 top값을 수정해서 사용-->
  <li class="n03"><a href="?menu=3"><span>메뉴3</span></a></li>
  <li class="n04"><a href="?menu=4"><span>메뉴4</span></a></li>
 </ul>
</div>