title: Css drop-down sub-menu not waiting for mouse
body: <p><strong>Problem</strong>: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?</p>
  
  <p>Part of my style.css:</p>
  
  <pre><code>#menu {
      padding: 0 45px 0 45px;
      position: relative;
      background: #209D9D url(images/img02.gif) repeat-x top left;
      margin: 0 0 0 0;
      height: 60px;
      line-height: 60px;
      width: 890px;
      border-top: solid 1px #5AD7D7;
      text-shadow: 0 1px 1px #007D7D;
  }
  
  #menu a {
      text-decoration: none;
      color: #ffffff;
      font-size: 1.25em;
      letter-spacing: -1px;
  }
  
  #menu a:hover{
      color: #136F6F;
  }
  
  #menu ul {
      list-style: none;
      text-align: center;
  }
  
  #menu ul li {
      padding: 0 20px 0 20px;
      display: inline;
      position: relative;
      list-style: none;
  }
  
  #menu ul li.first {
      padding-left: 0;
  }
  
  #menu ul li:hover ul{
      visibility:visible;
  }
  
  #menu ul ul{
      position: absolute;
      top: 35px;
      visibility: hidden;
  }
  
  #menu ul ul li{
      position: relative;
      float: left;
      margin: 0;
      padding:0;
  }
  
  #menu ul ul li a{
      display: block;
      text-decoration:none;
      text-align: center;
      height: 55px;
      line-height: 55px;  
      width: 200px;
      background-color: #209D9D;
      color: white;
  }
  #wrapper {
      position: relative;
      width: 980px;
      margin: 75px auto 0 auto;
      background: #FFFFFF;
  }
  </code></pre>
  
  <p>Part of my index.html:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="menu"&gt;
              &lt;ul&gt;
                  &lt;li class="first current_page_item"&gt;&lt;a href="#"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Papers&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Me&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Curriculum Vitae&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;!-- &lt;li class="last"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; --&gt;
              &lt;/ul&gt;
              &lt;br class="clearfix" /&gt;
      &lt;/div&gt;
  </code></pre>