z-index관련 질문이에요. 채택완료
리리치요
11년 전
조회 5,898
<div><style></div>
<div><div>#menu, #menu ul{<span style="font-size: 10pt; line-height: 1.5">text-align:center;</span><span style="font-size: 10pt; line-height: 1.5">margin:0;</span><span style="font-size: 10pt; line-height: 1.5">padding:0;</span><span style="font-size: 10pt; line-height: 1.5">z-index:970;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu a{<span style="font-size: 10pt; line-height: 1.5">background-color:#aaa;</span><span style="font-size: 10pt; line-height: 1.5">width:180px;</span><span style="font-size: 10pt; line-height: 1.5">line-height:32px;</span><span style="font-size: 10pt; line-height: 1.5">display:block;</span><span style="font-size: 10pt; line-height: 1.5">color:#000000;</span><span style="font-size: 10pt; line-height: 1.5">text-decoration:none;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu a:hover{<span style="font-size: 10pt; line-height: 1.5">background-color:#dddddd;</span><span style="font-size: 10pt; line-height: 1.5">color:#000000;</span><span style="font-size: 10pt; line-height: 1.5">display: inline-block;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu li{<span style="font-size: 10pt; line-height: 1.5">position:relative;</span><span style="font-size: 10pt; line-height: 1.5">list-style-type:none; </span><span style="font-size: 10pt; line-height: 1.5">list-style:none;</span><span style="font-size: 10pt; line-height: 1.5">float:left;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu ul {<span style="font-size: 10pt; line-height: 1.5">position:absolute;</span><span style="font-size: 10pt; line-height: 1.5">display:none;</span><span style="font-size: 10pt; line-height: 1.5">list-style-type:none; </span><span style="font-size: 10pt; line-height: 1.5">list-style:none;</span></div>
<div>left:0px;<span style="font-size: 10pt; line-height: 1.5">width:180px;</span><span style="font-size: 10pt; line-height: 1.5">top:32px;</span><span style="font-size: 10pt; line-height: 1.5">background-color: #FFFFFF;</span><span style="font-size: 10pt; line-height: 1.5">z-index:950;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu li ul a{<span style="font-size: 10pt; line-height: 1.5">width:180px;</span><span style="font-size: 10pt; line-height: 1.5">height:auto;</span><span style="font-size: 10pt; line-height: 1.5">float:left;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu ul ul{<span style="font-size: 10pt; line-height: 1.5">width:180px;</span><span style="font-size: 10pt; line-height: 1.5">top:auto;</span><span style="font-size: 10pt; line-height: 1.5">}</span><span class="Apple-tab-span" style="font-size: 10pt; line-height: 1.5; white-space: pre"> </span></div>
<div>#menu li ul ul {<span style="font-size: 10pt; line-height: 1.5">left:170px;</span><span style="font-size: 10pt; line-height: 1.5">top:5px;</span><span style="font-size: 10pt; line-height: 1.5">z-index:990;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{<span style="font-size: 10pt; line-height: 1.5">display:none;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div>
<div>#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{<span style="font-size: 10pt; line-height: 1.5">display:block;</span><span style="font-size: 10pt; line-height: 1.5">}</span></div></div>
<div></style></div>
<div>
<div><div><ul id="menu" class="menu"></div>
<div> <li><a href="#"> 홈 </a></li></div>
<div> <li><a href="#"> 게시판 1</a></li></div>
<div> <li><a href="#"> 메뉴 2 </a></div>
<div> <ul></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li><a href="#"> 서브메뉴 2-1 </a></div>
<div> <ul></div>
<div> <li><a href="#"> 게시판 2-1-1 </a></li></div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span><li><a href="#"> 게시판 2-1-2 </a></li></div>
<div> </ul></div>
<div> </li></div>
<div> <li><a href="#"> 게시판 2-2 </a></li></div>
<div> <li><a href="#"> 게시판 2-3 </a></li></div>
<div> </ul></div>
<div> </li></div>
<div></ul></div></div>
<div>
이 소스에서 크롬에선 제대로 나오는데

IE에서는 위 그림처럼 되더라구요 어떻게 해야 될까요..??
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
11년 전
#menu, #menu ul{text-align:center;margin:0;padding:0;z-index:970;}
#menu a{width:180px;line-height:32px;display:block;color:#000000;text-decoration:none;}
#menu a:hover{background-color:#dddddd;color:#000000;display: inline-block;}
#menu li{position:relative;list-style-type:none; list-style:none;float:left;}
#menu ul {position:absolute;display:none;list-style-type:none; list-style:none;
left:0px;width:180px;top:32px;background-color: #FFFFFF;z-index:950;}
#menu li ul a{z-index:-8;width:180px;height:auto;float:left;}
#menu ul ul{width:180px;top:auto;}
#menu li ul ul {left:170px;top:5px;z-index:990; background:#fff;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{display:none;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{display:block;}
백그라운드때문에 겹쳐져있는지 확인이 안되서 색깔좀 바꿧어요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인