CSS/HTML Drop Menu going away after moving mouse - html

Question

I have a menu and some of my links have dropdown menus. Hovering over the link brings down the dropdown menu, but if I move my cursor onto the actual dropdown menu, the dropdown menu disappears.
Please help!
Here is the CSS and HTML of the actual menu:
CSS:
.menu ul {
color: #3d3d3d;
text-align: right;
float: right;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.menu ul li {
font-family: LemonMilk;
font-size: 24px;
font-weight: bold;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.menu ul li:hover {
color: #0096ff;
}
.menu ul li ul {
padding: 0;
position: absolute;
background-color: rgba(0,0,0, 0.5);
margin-top: 5px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.menu ul li ul li {
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
font-size: 16px;
}
.menu ul li ul li:hover { background-color: rgba(0,0,0, 0.9); }
.menu ul li:hover ul {
color: #0096ff;
display: block;
opacity: 1;
visibility: visible;
text-decoration: none;
}
.menu ul li a {
color: #3d3d3d;
}
.menu ul li a:hover {
color: #0096ff;
}
.menu ul li ul li a {
color: #fff;
}
.menu ul li ul li a:hover {
color: #0096ff;
}
HTML:
<header>
<div class="wrapper">
<div id="clogo"></div>
<span class="menu">
<ul id="dropnav">
<li><a href="/forums/index.php" />Forums</a></li>
<li>Members
<ul>
<li>Member List</li>
<li>Staff List</li>
</ul>
</li>
<li>Donate<br>
<ul>
<li>Buycraft</li>
<li>Buy Credits</li>
<li>CL Plus</li>
</ul>
</li>
</ul>
</span>
</div>
</header>

Answer 1

Consider to use > selector in the CSS, so it only looks one level down the markup structure, no deeper. A demo that made similar to your style - http://jsfiddle.net/55nw4wmy/
.class ul li {
affects all levels of <li> inside.
}
.class > ul > li {
only affects the first level.
}
.class > ul > li > ul > li {
only affects the second level.
}
That way, you don't have to overwrite the rules continually. And for the drop down disappearing problem, see the comments in the demo link above.

Answer 2

The codes you shown work fine on my end, but from your code I suspect .menu ul li ul { margin-top: 5px; } could be the cause of such behavior. Currently it's working only because the first-level li have a bottom padding that is larger than 5px.
If by any chance the li in your homepage header doesn't have a bottom padding, then the top margin in the 2nd level ul will cause a 5px space between the li and the ul sublist inside it. When you move your mouse from the li to the sub list the mouse passes through that 5px space zone which doesn't belong to the list item and :hover loses its effect.
I would suggest changing that to .menu ul li ul { padding-top: 5px; }