hide menu delay

http://stackoverflow.com/questions/10232248/how-can-i-solve-that-my-submenu-on-my-navigation-menu-do-not-despair-when-i-hove

by ryanwfiorini

HTML

<ul id="nav">
    <li><a href="#">MENU LINK 1</a>
        <ul>
        </ul>

    </li>

    <li><a href="#">MENU LINK 2</a>
        <ul>
            <li><a href="#">SUBMENU LINK 2a</a></li>
            <li><a href="#">SUBMENU LINK 2b</a></li>
            <li><a href="#">SUBMENU LINK 2c</a></li>
        </ul>
    </li>

    <li><a href="#">MENU LINK 3</a>
        <ul>
            <li><a href="#">SUBMENU LINK 3a</a></li>
            <li><a href="#">SUBMENU LINK 3b</a></li>
            <li><a href="#">SUBMENU LINK 3c</a></li>
        </ul>
    </li>

    <li><a href="#">MENU LINK 4</a>
        <ul>
            <li><a href="#">SUBMENU LINK 4a</a></li>
            <li><a href="#">SUBMENU LINK 4b</a></li>
            <li></li>
        </ul>
    </li>

    <li><a href="#">MENU LINK 5</a>
        <ul>
        </ul>
    </li> 
</ul>

CSS

@-webkit-keyframes showMenu {
    from { 
        opacity: 0; 
        display:none;
    }
    to { 
        opacity: 1; 
        display:block;
    }
}

@-webkit-keyframes hideMenu {
    from { 
        opacity: 1; 
        display:block;
    }
    to { 
        opacity: 0; 
        display:none;
    }
}

ul#nav {
  position:relative;
  float: left;
  width: 961px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* gradient */
  background: black;
    
}


ul#nav li {
  display: inline;
}

ul#nav li a {
  float: right;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  margin: auto;
  padding: 0 35px;
}

a.selected 
{
color:Blue;   
}

/* APPLIES THE ACTIVE STATE */
ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #dd006b;  
}



/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
-webkit-animation-name: hideMenu;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-delay: 0s;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  -webkit-animation-name:showMenu;
-webkit-animation-duration: 1s;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-delay: 1s;
    width: 961px;
  height: 35px;
  position: absolute;
  margin: 40px 0 0 0;
  /* gradient */
  background: #dd006b url(../img/menu-child.png) repeat-x;      
  background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e));
  background: -moz-linear-gradient(top,  #dd006b,  #a1014e);
  background: linear-gradient(-90deg, #dd006b, #a1014e); 
 
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 35px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 2 30px 0 0;
  background: #dd006b url(../img/menu-child.png) repeat-x;     
  background: -webkit-gradient(linear, left top, left bottom,...