CSS drop-down menu - css

Question

SEE LIVE MENU HERE.
I am trying to figure out why the drop-down disappears after you attempt to rollover it. Can someone see the problem in my code? Thank you.
HERE IS MY HTML MENU
<div id="menu">
<ul>
<li><span>Needs Assessment</span> </li>
<li><span>Knowledge Acquisition</span>
<ul>
<li>Administer Knowledge<br>Pre-Test</li>
<li>Assign Asthma<br>Article </li>
<li>Administer Knowledge<br>Post-Test</li>
<li>Discuss Asthma<br>Case Study</li>
</ul>
</li>
<li><span>Skills Proficiency</span> </li>
<li><span>Simulation in Teams</span>
<ul>
<li>Perform Asthma<br>Simulation</li>
<li>Facilitate<br>Debriefing</li>
</ul>
</li>
<li><span>Performance</span></li>
<li><span>Resources</span></li>
</ul>
</div>
HERE IS MY CSS
#menu {
position: relative;
top: 10px;
left: 0px;
width: 940px;
height: 47px;
}
#menu ul {
position: relative;
top: -15px;
left: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
margin-right: 0px;
border: solid 0px #4981a8;
width: 156px;
background-image: url ('http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
background-repeat: no-repeat;
}
#menu ul li a {
display: block;
width: 156px;
padding: 12px 0px 10px 0px;
border: solid 0px #fff;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: lighter;
text-align: center;
text-decoration: none;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
}
#menu a:hover span {
color:#ffdd00;
}
#menu li ul {
position: absolute;
top: 47px;
left: 0px;
background-color:#4981a8;
border: solid 1px #4981a8;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
font-family: 'Cabin', sans-serif;
font-size: 14px;
color: #000;
font-weight: lighter;
height: 38px;
background-color:#eee;
margin-bottom: -9px;
}
#menu li li a:hover {
color: #065389;
}

Answer 1

You have another element on your page that's partially covering up the navigation:
#textbox {
position: relative;
top: -30px;
}
This is blocking the :hover. To solve this, give your #header a z-index:1. Any positive value should work, you just need to set it to something so the element stays on top.