[gnb질문] z-index를 가장 위로 올리고 싶은데 ㅜㅜ
본문
#header #gnb_wrap ul.gnb li:hover > ul { display:block; z-index:99999;}
현재 이렇게 해서 오버된 내용이 제일 위로 올라오게 하고싶은데 안되네요ㅠㅠ
왜그러는건지...
크롬, 익스10,9,8에서는 또 오버가 제일 위로 올라오긴 합니다.
익스7에서 문제네요ㅠㅠ
보시고 답변주시면 감사하겠습니다.
/* header */
#header_wrap { width:100%; height:110px; background:url(../img/menu_bg.gif) repeat-x;}
#header {position:relative; width:1000px; height:110px; margin:0 auto; }
#header #top { float:left; padding-top:20px; }
#header #gnb_wrap ul.gnb{ padding-top:35px; }
#header #gnb_wrap ul.gnb li { float:left; position:relative; height:30px; left:125px; }
#header #gnb_wrap ul.gnb li a { display:block; text-indent:-9999px; width:67px; height:16px; background:url(../img/menu.png) no-repeat; margin-left:35px; }
#header #gnb_wrap ul.gnb li.gnb1 a { background-position:0px 0px; }
#header #gnb_wrap ul.gnb li.gnb2 a { background-position:-94px 0px; }
#header #gnb_wrap ul.gnb li.gnb3 a { background-position:-190px 0px; }
#header #gnb_wrap ul.gnb li.gnb4 a { background-position:-282px 0px; }
#header #gnb_wrap ul.gnb li.gnb5 a { width:108px;background-position:-376px 0px; }
#header #gnb_wrap ul.gnb li.gnb1 a:hover, #header #gnb_wrap ul.gnb li.gnb1_on a { background-position:0px -17px; }
#header #gnb_wrap ul.gnb li.gnb2 a:hover, #header #gnb_wrap ul.gnb li.gnb2_on a { background-position:-94px -17px; }
#header #gnb_wrap ul.gnb li.gnb3 a:hover, #header #gnb_wrap ul.gnb li.gnb3_on a { background-position:-190px -16px; }
#header #gnb_wrap ul.gnb li.gnb4 a:hover, #header #gnb_wrap ul.gnb li.gnb4_on a { background-position:-282px -16px; }
#header #gnb_wrap ul.gnb li.gnb5 a:hover, #header #gnb_wrap ul.gnb li.gnb5_on a { width:108px; background-position:-376px -17px; }
#header #gnb_wrap ul.gnb_sub { position:absolute; top:25px; left:-170px; z-index:9000; display:none; background:#fff; width:1000px; height:20px;}
#header #gnb_wrap ul.gnb_sub li { float:left; }
#header #gnb_wrap ul.gnb_sub li a { display:block; text-indent:-9999px; width:35px; height:12px; background:url(../img/menu_sub_1.png) no-repeat; margin-left:18px; }
#header #gnb_wrap ul.gnb_sub li.sub1 a { width:35px; background-position:0px 0px; }
#header #gnb_wrap ul.gnb_sub li.sub2 a { width:50px; background-position:-48px 0px; }
#header #gnb_wrap ul.gnb_sub li.sub3 a { width:42px; background-position:-112px 0px; }
#header #gnb_wrap ul.gnb_sub li.sub1 a:hover, #header #gnb_wrap ul.gnb_sub li.sub1_on a { width:35px; background-position:0px -12px; }
#header #gnb_wrap ul.gnb_sub li.sub2 a:hover, #header #gnb_wrap ul.gnb_sub li.sub2_on a { width:50px; background-position:-48px -12px; }
#header #gnb_wrap ul.gnb_sub li.sub3 a:hover, #header #gnb_wrap ul.gnb_sub li.sub3_on a { width:42px; background-position:-112px -12px; }
#header #gnb_wrap ul.gnb_sub2 { position:absolute; top:25px; left:-320px; z-index:9000; display:none; width:1000px; height:20px; background:#fff;}
#header #gnb_wrap ul.gnb_sub2 li { float:left; }
#header #gnb_wrap ul.gnb_sub2 li a { display:block; text-indent:-9999px; width:53px; height:13px; background:url(../img/menu_sub_2.png) no-repeat; margin-left:18px; }
#header #gnb_wrap ul.gnb_sub2 li.sub1 a { width:70px; background-position:0px 0px; }
#header #gnb_wrap ul.gnb_sub2 li.sub2 a { width:127px; background-position:-84px 0px; }
#header #gnb_wrap ul.gnb_sub2 li.sub3 a { width:104px; background-position:-227px 0px; }
#header #gnb_wrap ul.gnb_sub2 li.sub4 a { width:103px; background-position:-346px 0px; }
#header #gnb_wrap ul.gnb_sub2 li.sub5 a { width:120px; background-position:-462px 0px; }
#header #gnb_wrap ul.gnb_sub2 li.sub6 a { width:42px; background-position:-587px 0px; }
#header #gnb_wrap ul.gnb_sub2 li.sub1 a:hover, #header #gnb_wrap ul.gnb_sub2 li.sub1_on a { width:70px; background-position:0px -14px; }
#header #gnb_wrap ul.gnb_sub2 li.sub2 a:hover, #header #gnb_wrap ul.gnb_sub2 li.sub2_on a { width:127px; background-position:-84px -14px; }
#header #gnb_wrap ul.gnb_sub2 li.sub3 a:hover, #header #gnb_wrap ul.gnb_sub2 li.sub3_on a { width:104px; background-position:-227px -14px; }
#header #gnb_wrap ul.gnb_sub2 li.sub4 a:hover, #header #gnb_wrap ul.gnb_sub2 li.sub4_on a { width:103px; background-position:-346px -14px; }
#header #gnb_wrap ul.gnb_sub2 li.sub5 a:hover, #header #gnb_wrap ul.gnb_sub2 li.sub5_on a { width:120px; background-position:-462px -14px; }
#header #gnb_wrap ul.gnb_sub2 li.sub6 a:hover, #header #gnb_wrap ul.gnb_sub2 li.sub6_on a { width:42px; background-position:-587px -14px; }
#header #gnb_wrap ul.gnb_sub3 { position:absolute; top:25px; left:-300px; z-index:9000; display:none; padding-left:170px; background:#fff; width:1000px; height:20px}
#header #gnb_wrap ul.gnb_sub3 li { float:left; }
#header #gnb_wrap ul.gnb_sub3 li a { display:block; text-indent:-9999px; width:50px; height:12px; background:url(../img/menu_sub_3.png) no-repeat; margin-left:18px; }
#header #gnb_wrap ul.gnb_sub3 li.sub1 a { background-position:0px 0px; }
#header #gnb_wrap ul.gnb_sub3 li.sub2 a { background-position:-68px 0px; }
#header #gnb_wrap ul.gnb_sub3 li.sub1 a:hover, #header #gnb_wrap ul.gnb_sub3 li.sub1_on a { background-position:0px -12px; }
#header #gnb_wrap ul.gnb_sub3 li.sub2 a:hover, #header #gnb_wrap ul.gnb_sub3 li.sub2_on a { background-position:-68px -12px; }
#header #gnb_wrap ul.gnb_sub5 { position:absolute; top:25px; left:-483px; z-index:9000; display:none; padding-left:355px; background:#fff; width:1000px; height:20px}
#header #gnb_wrap ul.gnb_sub5 li { float:left; }
#header #gnb_wrap ul.gnb_sub5 li a { display:block; text-indent:-9999px; width:30px; height:12px; background:url(../img/menu_sub_5.png) no-repeat; margin-left:18px; }
#header #gnb_wrap ul.gnb_sub5 li.sub1 a { width:30px; background-position:0px 0px; }
#header #gnb_wrap ul.gnb_sub5 li.sub2 a { width:43px; background-position:-46px 0px; }
#header #gnb_wrap ul.gnb_sub5 li.sub1 a:hover, #header #gnb_wrap ul.gnb_sub5 li.sub1_on a { width:30px; background-position:0px -12px; }
#header #gnb_wrap ul.gnb_sub5 li.sub2 a:hover, #header #gnb_wrap ul.gnb_sub5 li.sub2_on a { width:43px; background-position:-46px -12px; }
#header #gnb_wrap ul.gnb li:hover > ul { display:block; z-index:99999;}
#header #gnb_wrap ul.gnb li.gnb1_on > ul { display:block; }
#header #gnb_wrap ul.gnb li.gnb2_on > ul { display:block;}
#header #gnb_wrap ul.gnb li.gnb3_on > ul { display:block; }
#header #gnb_wrap ul.gnb li.gnb5_on > ul { display:block; }
<div id="gnb_wrap">
<ul class="gnb">
<li class="gnb1"><a href="intro.php"><span></span></a>
<ul class="gnb_sub">
<li class="sub1"><a href="intro.php"></a></li>
<li class="sub2"><a href="intro2.php"></a></li>
<li class="sub3"><a href="intro3.php"></a></li>
</ul>
</li>
<li class="gnb2"><a href="info5.php"><span></span></a>
<ul class="gnb_sub2">
<li class="sub5"><a href="info5.php"></a></li>
<li class="sub2"><a href="info2.php"></a></li>
<li class="sub3"><a href="info3.php"></a></li>
<li class="sub4"><a href="info4.php"></a></li>
<li class="sub1"><a href="info.php"></a></li>
<li class="sub6"><a href="info6.php"></a></li>
</ul>
</li>
<li class="gnb3"><a href="bbs/board.php?bo_table=photo"><span></span></a>
<ul class="gnb_sub3">
<li class="sub1"><a href="bbs/board.php?bo_table=photo"></a></li>
<li class="sub2"><a href="bbs/board.php?bo_table=photo2"></a></li>
</ul>
</li>
<li class="gnb4"><a href="bbs/write.php?bo_table=request"><span></span></a>
</li>
<li class="gnb5"><a href="bbs/board.php?bo_table=notice3"><span></span></a>
<ul class="gnb_sub5">
<li class="sub1"><a href="bbs/board.php?bo_table=notice3"></a></li>
<li class="sub2"><a href="bbs/board.php?bo_table=notice"></a></li>
<!-- <li class="sub3"><a href="../bbs/board.php?bo_table=notice2"></a></li> -->
</ul>
</li>
</ul>
</div>
답변을 작성하시기 전에 로그인 해주세요.
