수다닷컴

2뎁스 네비게이션 질문입니다.아래 처럼 구조를 짜고css로 오버시 하위 메뉴가 display:block 되도록 하였습니다.그리고 활성화된 메뉴도 display:block이 되도록 했구요ㅠㅠ
그런데 문제가활성화된 상태에서 다른 메뉴에 오버하면활성화된 메뉴 위에 겹쳐서 나온다는 겁니다 ㅠㅠ문제 화면 입니다 ㅠㅠ
첫번째 메뉴가 활성화 였을 경우옆에 메뉴에 마우스오버하면 해당 화면 활성화 서브메뉴는 사라지고오버가 되고 다시 마우스오버를 떼면 활성화모습이 유지되도록 하고 싶습니다 ㅠㅠ
div id=gnb_wrap ul class=gnb li class=gnb1_ona href=#span소개/span/a ul class=gnb_sub li class=gnb1_ona href=#소개1/a/li li class=gnb2a href=#소개2/a/li li class=gnb3a href=#소개3/a/li li class=gnb4a href=#소개4/a/li /ul /li li class=gnb2a href=#span공지사항/span/a /li li class=gnb3a href=#span게시판/span/a /li li class=gnb4a href=#span게시판2/span/a /li li class=gnb5a href=#span게시판3/span/a /li /ul /div

#header_wrap { width:100%; height:112px; background:#fff;}#header_wrap #header { width:1000px; height:112px; margin:0 auto; position:relative;}#header_wrap #header .logo { width:180px; height:24px; position:absolute; top:8px; left:26px;}#header_wrap #header .gnb_txt { font-size:11px; color:#bfbfbf; font-weight:bold; width:300px; height:24px; position:absolute; top:91px; left:26px; z-index:550;}
#header #gnb_wrap { width:100%;}#header #gnb_wrap ul.gnb{ float:right; margin:36px 0 0 0;}#header #gnb_wrap ul.gnb li { float:left; position:relative; }#header #gnb_wrap ul.gnb li a { background:url(img/common/nav_txt.png) no-repeat; float:left; display:block; width:76px; height:20px; margin-right:30px; text-indent:-9999px; }#header #gnb_wrap ul.gnb li.gnb1 a { width:76px; height:20px; background-position:0px 0; margin-right:64px; }#header #gnb_wrap ul.gnb li.gnb2 a { width:76px; height:20px; background-position:-146px 0; margin-right:64px;}#header #gnb_wrap ul.gnb li.gnb3 a { width:76px; height:20px; background-position:-292px 0; margin-right:64px;}#header #gnb_wrap ul.gnb li.gnb4 a { width:76px; height:20px; background-position:-434px 0; margin-right:64px;}#header #gnb_wrap ul.gnb li.gnb5 a { width:76px; height:20px; background-position:-582px 0; margin-right:64px;}
#header #gnb_wrap ul.gnb li.gnb1 a:hover, #header #gnb_wrap ul.gnb li.gnb1_on a { float:left; width:76x; he:76x; height:20px; background-position:0px -22px; margin-right:64px; }#header #gnb_wrap ul.gnb li.gnb2 a:hover, #header #gnb_wrap ul.gnb li.gnb2_on a { float:left; width:76x; height:20px; background-position:-146px -22px; margin-right:64px; }#header #gnb_wrap ul.gnb li.gnb3 a:hover, #header #gnb_wrap ul.gnb li.gnb3_on a { float:left; width:76x; height:20px; background-position:-292px -22px; margin-right:64px; }#header #gnb_wrap ul.gnb li.gnb4 a:hover, #header #gnb_wrap ul.gnb li.gnb4_on a { float:left; width:76x; height:20px; background-position:-434px -22px; margin-right:64px; }#header #gnb_wrap ul.gnb li.gnb5 a:hover, #header #gnb_wrap ul.gnb li.gnb5_on a { float:left; width:76x; height:20px; background-position:-582px -23px; margin-right:64px;}
#header #gnb_wrap ul.gnb_sub { width:283px; height:36px; background:url(img/common/sub_01_tit_back.png) no-repeat; position:absolute; top:20px; left:-25px; display:none; z-index:500;}#header #gnb_wrap ul.gnb_sub li { float:left; }#header #gnb_wrap ul.gnb_sub li a { display:block; text-indent:-9999px; background:url(img/common/sub_01_tit.png); height:14px; }#header #gnb_wrap ul.gnb_sub li.gnb1 a { width:36px; height:14px; background-position:0px 0px; margin:14px 0 0 20px; }#header #gnb_wrap ul.gnb_sub li.gnb2 a { width:46px; height:14px; background-position:-55px 0; margin:14px 0 0 20px;}#header #gnb_wrap ul.gnb_sub li.gnb3 a { width:48px; height:14px; background-position:-116px 0px; margin:14px 0 0 20px;}#header #gnb_wrap ul.gnb_sub li.gnb4 a { width:50px; height:14px; background-position:-182px 0; margin:14px 0 0 20px;}#header #gnb_wrap ul.gnb_sub li.gnb1 a:hover, #header #gnb_wrap ul.gnb_sub li.gnb1_on a { display:block; width:36px; height:14px; background-position:0px -16px; margin:14px 0 0 20px;}#header #gnb_wrap ul.gnb_sub li.gnb2 a:hover, #header #gnb_wrap ul.gnb_sub li.gnb2_on a { display:block; width:46px; height:14px; background-position:-55px -16px; margin:14px 0 0 20px;}#header #gnb_wrap ul.gnb_sub li.gnb3 a:hover, #header #gnb_wrap ul.gnb_sub li.gnb3_on a { display:block; width:48px; height:14px; background-position:-116px -16px; margin:14px 0 0 20px;}#header #gnb_wrap ul.gnb_sub li.gnb4 a:hover, #header #gnb_wrap ul.gnb_sub li.gnb4_on a { display:block; width:50px; height:14px; background-position:-182px -16px; margin:14px 0 0 20px;}
#header #gnb_wrap ul.gnb li:hover ul { display:block;}#header #gnb_wrap ul.gnb li.gnb1_on ul { display:block;}

신청하기