Z-Indexed drop down menu not diplaying above a following div ul - css

Question

I have added a second row on my menu_Box called menu_Box2
Trying my shot at Z-Indexing for the first time.
I cannot to get the menu_Box drop down menu to appear above menu_Box2 items.
Ive tried some different z-Index, overflow and position values with no luck.
I think I may need to Z-index some of the ul li items, but since they are group together its difficult for me to figure out which ones.
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>Services
<ul>
<li>Psych-K </li>
<li>Food & Environmental Allergy and Sensitivity Testing </li>
<li>Supplement and Nutrition Evaluation </li>
<li>Food Value Testing </li>
</ul>
</li><span class="extraStyle">::</span>
<li>Sessions </li><span class="extraStyle">::</span>
<li>Biography </li><span class="extraStyle">::</span>
<li>Health Topics
<!-- <ul>
<li>Open Source Forums </li>
<li>Open Source Forums </li>
</ul>-->
</li><span class="extraStyle">::</span>
<li>Favorite Products</li><span class="extraStyle">::</span>
<li>Contact </li>
</ul>
</div> <!--Close Menu Box Div-->
<div id="menu_Box2"> <!--Menu Box Div-->
<ul>
<li>Recipies
</ul>
</div> <!--Close Menu Box Div-->

Answer 1

The z-index property only applies to positioned elements, so add position: relative; to your #menu_Box

Answer 2

Add z-index:500 to menu_Box ul not menuBox (I would use z-index 1, not z-index 500 because it is just enough to go above menu_Box2)
CSS:
#menu_Box ul
{
z-index:1;
}
This works because you need to add it to the 'popup-box', not the text.
DEMO