懸停時下拉菜單消失

Question

我的下拉菜單出現問題。當我將鼠標懸停在菜單上時，它會在第二行之後消失。我不知道我該怎麼做來改變它。

這裏是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; 
} 

任何幫助將是真棒！

Answer 1

您的問題的工作示例。 github

使用HTML5和CSS3實現