수다닷컴

좌측서브메뉴 코딩 어떻게 하시나요???
저는 짧은 지식으로 아래와 같이 코딩을 했는데 익스플로러 버전에 따라 달리 보이는 현상이 있습니다.
아마도 각 depth에 주었던 스타일이 다음 스타일에도 영향을 미치는 문제 때문인 거 같은데
어떻게 해결해야 할지 모르겠네요;;;; ㅠ.ㅠ
이런 메뉴의 경우 어떻게 코딩하는 것이 가장 효과적일가요??
그리고 지금 저처럼 코딩했을 경우 어떻게 수정해야 제대로 나올까요??
이미지로 약간의 꼼수를 썼는데.. 그것도 익스6,7에서는 수용해주지 않네요;;; 크크

div id=container_left
div class=loginHongKD/div
ul class=depth1
li class=offa href=#1/a/li
li class=offa href=#2/a/li
li class=offa href=#3/a/li
li class=onWeb ERM/li
ul class=depth2
li class=ona href=#1/a/li
li class=on2/li
ul class=depth3
li class=offa href=#-1/a/li
li class=on-2/li
/ul
li class=offa href=#3/a/li
/ul
/ul
/div
********** css ***************************************************

/* left navi */
.depth1 {width:160px;; height:300px; float:left;}
.depth1 li.off {width:140px; height:20px; padding-top:7px; padding-left:20px; background-image:url(../images/left_mdepth1off.gif); background-position:center left; background-repeat:no-repeat; float:left;}
.depth1 li.off a:link{color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth1 li.off a:visited{color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth1 li.off a:hover{color:#f39600; font-size:12px; font-weight:bold; text-decoration:none;}
.depth1 li.on {width:140px; height:20px; padding-top:7px; padding-left:20px; background-image:url(../images/left_mdepth1on.gif); background-position:center left; background-repeat:no-repeat; font-size:12px; color:#777777; font-weight:bold; float:left;}

.depth2 {width:140px; height:92px; margin-left:20px; float:left;}
.depth2 li.off {width:128px; height:18px; padding-top:5px; padding-left:12px; background-image:url(../images/left_mdepth2off.gif); background-position:center left; background-repeat:no-repeat; float:left;}
.depth2 li.off a:link {color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth2 li.off a:visited {color:#777777; font-size:12px; font-weight:bold; text-decoration:none;}
.depth2 li.off a:hover {color:#f39600; font-size:12px; font-weight:bold; text-decoration:none;}
.depth2 li.on {width:128px; height:18px; padding-top:5px; padding-left:12px; background-image:url(../images/left_mdepth2on.gif); background-position:center left; background-repeat:no-repeat; font-size:12px; color:#f39600; font-weight:bold; float:left;}

.depth3 {width:120px; height:42px; float:left;}
.depth3 li.off {width:120px; height:17px; padding-top:4px; background-image:url(../images/sp.gif); float:left;}
.depth3 li.off a:link {color:#777777; font-size:12px; font-weight:normal; text-decoration:none;}
.depth3 li.off a:visited {color:#777777; font-size:12px; font-weight:normal; text-decoration:none;}
.depth3 li.off a:hover {color:#f39600; font-size:12px; font-weight:normal; text-decoration:none;}
.depth3 li.on {width:120px; height:17px; padding-top:4px; background-image:url(../images/sp.gif); font-size:12px; font-weight:normal; color:#f39600; float:left;}

흑흑 도와주세요 ㅠ.ㅠ

신청하기