수다닷컴

안녕하세요. 탭메뉴를 코딩하려고 하는데 잘안되네요..제가 만들려는 스타일은 아래와 같아요.
마우스 오버시, 링크가 넘어갔을 시에 주황색으로 변하게 하려고 합니다.탭부분 소스는 이렇구요.

div class=btap
ul
li class=step1a href=#전체/a/li
li class=step2a href=#제품문의/a/li
li class=step3a href=#제공서비스/a/li
li class=step1a href=#A/S/a/li
li class=step2a href=#고객센터/a/li
/ul
/div

css는 아래와 같아요..

.btap {float:left; width:770px; height:25px; border-bottom:2px solid #f25712;}
.btap ul li {float:left; font-family:dotum; font-size:11px; color:#aaa; font-weight:bold;}
.btap ul li.step1 {width:57px; height:17px; background:url(../images/board_img/board_tap_01.gif) no-repeat 0 0; text-align:center; padding:8px 0 0 0;}
.btap ul li.step2 {width:81px; height:17px; background:url(../images/board_img/board_tap_02.gif) no-repeat 0 0; text-align:center; padding:8px 0 0 0;}
.btap ul li.step3 {width:94px; height:17px; background:url(../images/board_img/board_tap_03.gif) no-repeat 0 0; text-align:center; padding:8px 0 0 0;}

.btap ul li.step1 a {width:57px; height:17px; font-size:11px; padding:8px 0 0 0;}
.btap ul li.step1 a:hover, a:active{font-size:11px; background:url(../images/board_img/board_tap_01_over.gif) no-repeat 0 0; color:#fff;}
.btap ul li.step2 a {width:81px; height:17px; text-align:center; padding:8px 0 0 0;}
.btap ul li.step2 a:hover, a:active {width:81px; height:17px; font-size:11px; background:url(../images/board_img/board_tap_02_over.gif) no-repeat 0 0; color:#fff;}
.btap ul li.step3 a {width:94px; height:17px; text-align:center; padding:8px 0 0 0;}
.btap ul li.step3 a:hover, a:active{width:81px; height:17px; font-size:11px; background:url(../images/board_img/board_tap_03_over.gif) no-repeat 0 0; color:#fff;}롤오버걸어도 되지만.. 그렇게 되면 텍스트를 넣어 탭을 만들 수 없을거 같애서
링크 스타일을 줘서 백그라운드 이미지로 배경을 넣고 작업했는데...
텍스트에 링크를 걸어서 그런지 클릭시텍스트 부분만 배경이미지가 보이고, 하나의 탭 전체 배경이미지가 안보이네요..
어쩌면 당연한걸까요...

그러니까 요약해서 제가 하고 싶은것은..
배경에 컬러를 주는게 아니라 배경을 백그라운드 이미지로 깔고 클릭했을 때
전체 탭 배경이미지까지 변하게 하고 싶습니다.
어떻게 수정해야할까요?
그냥 롤오버로 하는게 나을까요? 부탁드리겠습니다~.
(롤오버 배경이미지의 화살표는 무시하고 말씀해주시어요...ㅎ)

신청하기