我的下拉菜单出现问题。当我将鼠标悬停在菜单上时，它会在第二行后消失。我不确定应该怎么做才能改变它。
这是HTML：
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="current"><span><a href="portfolio-index.html">Resources</a></span>
<ul>
<li><a href="alcoholre.html">Alcohol</a></li>
<li><a href="drugsre.html">Drugs</a></li>
<li><a href="mentalhealthre.html">Mental Health</a></li>
<li><a href="suicidere.html">Suicide</a>
</ul>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> <!-- end #nav -->
这是CSS
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
min-width: 100%;
border-radius: 0 0 25px 25px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 100%;
left: 100%;
border-radius: 15px 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: center;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); }
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
}
任何帮助都会很棒！