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><a href="/usa/discoversimulation/needs/"><span>Needs Assessment</span></a> </li>
    <li><a href="/usa/discoversimulation/knowledge/"><span>Knowledge Acquisition</span></a>
        <ul> 
            <li><a href="/usa/discoversimulation/knowledge/pre_test.asp">Administer Knowledge<br>Pre-Test</a></li> 
            <li><a href="/usa/discoversimulation/knowledge/assign_asthma.asp">Assign Asthma<br>Article </a></li> 
            <li><a href="/usa/discoversimulation/knowledge/post_test.asp">Administer Knowledge<br>Post-Test</a></li> 
            <li><a href="/usa/discoversimulation/knowledge/discuss_asthma.asp">Discuss Asthma<br>Case Study</a></li>

        </ul> 
    </li>
    <li><a href="/usa/discoversimulation/skills/"><span>Skills Proficiency</span></a> </li>
    <li><a href="/usa/discoversimulation/simulation/"><span>Simulation in Teams</span></a>
        <ul> 
            <li><a href="/usa/discoversimulation/simulation/asthma.asp">Perform Asthma<br>Simulation</a></li> 
            <li><a href="/usa/discoversimulation/simulation/debrief.asp">Facilitate<br>Debriefing</a></li> 
        </ul> 
    </li>
    <li><a href="/usa/discoversimulation/performance/"><span>Performance</span></a></li>
    <li><a href="/usa/discoversimulation/resources/"><span>Resources</span></a></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.