Question

我在menu_Box上添加了第二行，名为menu_Box2

第一次尝试Z-Indexing。

我无法将menu_Box下拉菜单显示在menu_Box2项目上方。

我尝试了一些不同的z-Index，溢出和位置值而没有运气。

我想我可能需要对一些ul项目进行Z-index，但由于它们是组合在一起，我很难弄清楚哪些项目。

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

将z-index:500添加到menu_Box ul而不是menuBox（我会使用 z-index 1 ，而不是 z-index 500 ，因为它足以超越menu_Box2）

<强> CSS：

#menu_Box ul
{
    z-index:1;
}

这是有效的，因为您需要将其添加到“弹出框”，而不是文本。的 DEMO

Z-Index下拉菜单未显示在以下div ul之上

2 个答案: