Drop-Down Menu behind other elements or not working - html

Question

So I am making a drop down-menu for my site and all the looks are fine, but when I hover over it, it appears but when I move my mouse over-top it disappears. When I alter the line height under "ul.menu li > a" it works a little but does not solve my problem. I have tried the "z-index" and nothing.
Heres my css:
ul.menu {
display: inline;
padding: 0px;
margin: 0px;
z-index:999;
}
#black_lay {
display:none;
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 0%; /* makes the div span all the way across the viewing area */
top: 0%; /* makes the div span all the way across the viewing area */
background-color: black;
-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
-webkit-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}
#overlay {
display: none; /* ensures it’s invisible until it’s called */
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 25%; /* positions the div half way horizontally */
top: 25%; /* positions the div half way vertically */
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 50%;
height: 50%;
z-index: 100; /* makes the div the top layer, so it’ll lay on top of the other content */
}
ul.menu li {
position:relative;
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul.menu li.drop {
position: relative;
}
ul.menu > li {
display: inline-block;
}
ul.menu li > a {
line-height: 80px;
padding: 0 1px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 9000000;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul > li {
list-style: none;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul.menu li:hover a { color: white; }
ul.menu li:hover .dropdownContain { top: 45px; z-index: 500;}
ul.menu li:hover .underline { border-bottom-color: #777; }
ul.menu li:hover .dropOut { opacity: 1; margin-top: 15px; }
Here's my HTML:
<nav style="display:inline">
<ul class="menu">
<li class="drop">
<a>Username</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Account</li>
<li>Logout</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>

Answer 1

This should be your problem:
ul.menu li:hover a { color: white; }
It changes the tab's text color to white, as if it's not there.
I changed it to a different color in fiddle and it's working just fine.