이 요망한 메뉴의 정렬 문제.. 누가 해결좀요.. ;;;
작약
아고..메뉴.. 며칠째 풀리지가 않네요.. 어떻게 해봐도 명쾌하게 해결이 안되네요..
문제는 IE8이상 버전과 다른 여러 브라우저, 그리고 IE6,7버전간의 문제입니다.
아래와 같이 코딩을 했을때 역시 익스8이상의 버전에서는 문제가 없습니다.
근데 문제는 익스 6,7... 익스 6,7을 해결하고자 width값을 많이 주면 브라우저에 스크롤이 생겨버리는게 문제입니다. 그렇다고 width값을 좀 줄이면 아래 그림처럼 메뉴가... 아래로.. ㅠㅠ
그렇다고 맨 마지막 메뉴의 하위메뉴를 뜬금없이 좌측에 둘 수도 없는 노릇이고...;;
뭔가 분명 하나만 손대면 되지 않을까 생각하는데... 안되네요..
명쾌한 답변 좀 부탁드립니다..
ie6,7ie8이상소스는 아래와 같습니다.
#header #gnb{position:relative; float:left; margin:35px 0 0 0; width:727px; height:71px;}
#header #gnb .menu{margin:0 0 0 13px;}
#header #gnb .menu li{}
#header #gnb .menu ul{position:absolute; top:42px; left:0; width:722px; height:28px; padding-top:3px;}
#header #gnb .menu .mainBar{background:url(../images/gmBgsm.gif) no-repeat;}
#header #gnb .menu .sub1{left:7px;}
#header #gnb .menu .sub2{left:120px;}
#header #gnb .menu .sub3{left:100px; _width:600px;}
#header #gnb .menu .sub4{left:120px; _width:550px;}
#header #gnb .menu .sub5{right:50px; _width:450px;}
#header #gnb .menu .sub6{padding-left:500px;border:1px solid #f00; left:0; width:250px;}
#header #gnb .menu .sub6 li{border:1px solid #000; }
#header #gnb .menu li {float:left; margin:4px 0 0 1px;}
#header #gnb .menu ul li{margin:5px 7px 0 7px; letter-spacing:-1px;}
#header #gnb .menu .sub1 .ov{color:#374EB5;}
#header #gnb .menu .sub1 a:hover{color:#374EB5;}
#header #gnb .menu .sub2 .ov{color:#228E9D;}
#header #gnb .menu .sub2 a:hover{color:#228E9D;}
#header #gnb .menu .sub3 .ov{color:#2370A3;}
#header #gnb .menu .sub3 a:hover{color:#2370A3;}
#header #gnb .menu .sub4 .ov{color:#2956BE;}
#header #gnb .menu .sub4 a:hover{color:#2956BE;}
#header #gnb .menu .sub5 .ov{color:#5833B0;}
#header #gnb .menu .sub5 a:hover{color:#5833B0;}
#header #gnb .menu .sub6 .ov{color:#7931AA;}
#header #gnb .menu .sub6 a:hover{color:#7931AA;}
div id=gnb style=background:url(images/gmBg.png) no-repeat;
ul class=menu
lia href=img src=../images/gm01.gif alt=메뉴1 //a
ul class=sub1 mainBar style=display:none;
lia href= class=ov메뉴1_1/a/li
lia href=메뉴1_2/a/li
/ul
/li
lia href=img src=../images/gm02.png alt=메뉴2 //a
ul class=sub2 mainBar style=display:none;
lia href= class=ov메뉴2_1/a/li
lia href=메뉴2_2/a/li
/ul
/li
lia href=img src=../images/gm03.png alt=메뉴3 //a
ul class=sub3 mainBar style=display:none;
lia href= class=ov메뉴3_1/a/li
lia href=메뉴3_1/a/li
lia href=메뉴3_2/a/li
lia href=메뉴3_3/a/li
/ul
/li
lia href=img src=../images/gm04.png alt=메46 //a
ul class=sub4 mainBar style=display:none;
lia href= class=ov메뉴4_1/a/li
lia href=메뉴4_2/a/li
lia href=메뉴4_3/a/li
/ul
/li
lia href=img src=../images/gm05.png alt=메뉴5 //a
ul class=sub5 mainBar style=display:none;
lia href= class=ov자유게시판/a/li
lia href=메뉴5_1/a/li
lia href=메뉴5_2/a/li
lia href=메뉴5_3/a/li
lia href=메뉴5_4/a/li
/ul
/li
li style=border:1px solid #000;a href=img src=../images/gm06_1.gif alt=메뉴6 //a
ul class=sub6 mainBar
lia href= class=ov공지사항/a/li
&;lia href=보도자료/a/li
lia href=통합검색/a/li
/ul
/li
/ul
/div