title: CSS Drop Down Menu - disappears too quickly on mouse out
body: <p>I'm hoping one of you nice people can help. I have a pure CSS drop down menu, as part of the design it needs to be slightly away from the main menu item, the problem is that because of this design there's a gap - and so as soon as the mouse moves away from the sub menu it disappears. I want it to hold their for a while longer so the user has more chance to click. Can anyone help?</p>
  
  <p>I've set up a <a href="http://jsfiddle.net/ydF3B/" rel="nofollow">JS fiddle here</a>.</p>
  
  <pre><code>&lt;div id="menu" class="top"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;about&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;portfolio&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Overview&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
      &lt;/div&gt;
  
  #menu{
  position:absolute;
  left:0;
  zoom:1;
  background-color:#010;
  }
  #menu ul{
  position:relative;
  border-top: dotted 1px #fff;
  border-bottom: dotted 1px #fff;
  padding:2px 0 2px 0;
  float:right;
  zoom:1;
  list-style:none;
  }
  #menu ul li{
  margin:0;
  font:16px/16px 'Open Sans', sans-serif;
  padding:0 5px 0 0;
  display:inline;
  position:relative;
  zoom:1;
  }
  #menu ul li a{
  color:#fff;
  text-decoration:none;
  }
  #menu ul li a:hover{
  text-decoration:underline;
  }
  #menu ul li.selected a{
      color:#8dc63e;
  }
  #menu ul li ul {
    border: 2px solid #fff;
    border-radius:10px;
    background-color: #8dc63e;
    padding: 0;
    position: absolute;
    top: 45px;
    right: -30px;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    -ms-transition: opacity 0.8s;
    -o-transition: opacity 0.8s;
    -transition: opacity 0.8s;
  }
  #menu ul li ul li {   
    display: block;
    border-bottom: 1px solid #fff; 
    color: #fff;
    padding:10px;
  }
  #menu ul li ul li:hover { text-decoration:underline; }
  #menu ul li.selected ul li a { color: #fff;}
  
  #menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index:250;
  }
  #menu ul li ul:after{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 15px 15px;
  border-color: #fff transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: -15px;
  left: 64px; 
  }
  </code></pre>