Z-인덱스는 다음과 같은 사업부의 UL

Question

위 diplaying하지 드롭 다운 메뉴 내 menu_Box에 두 번째 행이 처음으로 Z-색인에서 내 샷을 시도

menu_Box2

라는 추가했습니다.

menu_Box 드롭 다운 메뉴를 menu_Box2 항목 위에 표시 할 수 없습니다.

Ive는 운이없는 Z- 인덱스, 오버플로 및 위치 값을 시도했습니다.

필자는 ul li 항목 중 일부를 Z- 색인화 할 필요가 있다고 생각하지만 그룹화되어 있기 때문에 어떤 항목인지 파악하기가 어렵습니다.

CSS :

#menu_Box{ /*MENU BOX CONTAINER*/ 
width: 890px; 
height: 100%; 
margin: 0 auto; 
padding-left: 10px; 

z-index:500 

} 

#menu_Box2{ /*MENU BOX CONTAINER*/ 
width: 890px; 
height: 100%; 
margin: 0 auto; 
padding-left: 10px; 
padding-top:6px; 

overflow:visible; 

} 
#menu_Box ul, 
#menu_Box2 ul{ /*MENU BOX STYLE*/ 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
color:rgba(0, 57, 96, .95); 
font-size:24px; 
font-weight:normal; 
padding:0 0 0 8px; 
margin:0; 
position:relative; 
} 
.extraStyle{ 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
color:rgba(0, 57, 96, .85); 
font-size:22px; 
font-weight:normal; 
padding:0 0 0 7px; 
margin:0; 
} 
#menu_Box ul li, 
#menu_Box2 ul li{ 
display:inline-block; 
} 
#menu_Box ul li:hover, 
#menu_Box ul li a:hover, 
#menu_Box2 ul li:hover, 
#menu_Box2 ul li a:hover{ 
color:#456692; 
text-decoration:none; 

} 
#menu_Box ul li a,visited, 
#menu_Box2 ul li a,visited{ 
text-align:left; 
color:#263A75; 
display:block; 
padding: 0 0 0 0; /*Padding between titles*/ 
text-decoration:none; 
} 
#menu_Box ul li:hover ul, 
#menu_Box ul ul li, 
#menu_Box2 ul li:hover ul, 
#menu_Box2 ul ul li{ 
display:block; 
} 
#menu_Box ul ul, 
#menu_Box2 ul ul{ /*Drop Down Box*/ 
border: 3px solid rgba(0, 57, 96, .85) ; 
display:none; 
position:absolute; 
background-color: rgba(139, 183, 212, .9); 
padding: 3px 5px 3px 5px; /*Padding between list items*/  
} 
#menu_Box ul ul li a,visited, 
#menu_Box2 ul ul li a,visited{ 
color:#263A75; 
} 
#menu_Box ul ul li a:hover, 
#menu_Box2 ul ul li a:hover{ 
color:#456692; 
} 

HTML :

<div id="menu_Box">  <!--Menu Box Div--> 
<ul> 

<li><a href="http://www.enhancedliving.ca/index.php">Services</a> 
    <ul> 
    <li><a href="http://www.enhancedliving.ca/index.php#headerH2pk">Psych-K</a> </li> 
     <li><a href="http://www.enhancedliving.ca/index.php#headerH2fat">Food & Environmental Allergy and Sensitivity Testing</a> </li> 
     <li><a href="http://www.enhancedliving.ca/index.php#headerH2sne">Supplement and Nutrition Evaluation</a> </li> 
     <li><a href="http://www.enhancedliving.ca/index.php#headerH2fvt">Food Value Testing</a> </li> 
    </ul> 
</li><span class="extraStyle">::</span> 

<li><a href="http://www.enhancedliving.ca/sessions.php">Sessions</a> </li><span class="extraStyle">::</span> 

<li><a href="http://www.enhancedliving.ca/bio.php">Biography</a> </li><span class="extraStyle">::</span> 

<li><a href="http://www.enhancedliving.ca/forums.php">Health Topics</a> 
    <!-- <ul> 
     <li><a href="http://open-source-energy.org/forum/index.php">Open Source Forums</a> </li> 
     <li><a href="http://open-source-energy.org/forum/index.php">Open Source Forums</a> </li> 
    </ul>--> 
</li><span class="extraStyle">::</span> 

<li><a href="http://www.enhancedliving.ca/products.php">Favorite Products</a></li><span class="extraStyle">::</span> 

<li><a href="http://www.enhancedliving.ca/contact.php">Contact</a> </li> 
</ul> 
</div>  <!--Close Menu Box Div--> 





<div id="menu_Box2">  <!--Menu Box Div--> 
<ul> 
    <li><a href="http://www.enhancedliving.ca">Recipies</a> 
</ul> 
</div>  <!--Close Menu Box Div--> 

Answer 1

z-index 특성은 위치 요소에 적용되므로 추가 position: relative; 당신의 #menu_Box

Answer 2

에 내가하고자하지 menuBox (menu_Box ul에 z-index:500 추가 z- 색인 1을 사용하십시오. 하지 Z- 인덱스 500이 충분한) menu_Box2 위 이동하기 때문에

CSS :

당신이 '팝업 상자'에 추가해야하기 때문에이 작동

#menu_Box ul 
{ 
    z-index:1; 
} 

하지 텍스트 DEMO