Delay hiding of a CSS Submenu when it is no longer hovered

Question

I have a menu built with HTML and CSS only, no JavaScript used for the menu right now.

Below is an image that shows a Sub-menu open/expanded when the Parent menu is hovered over. In this example the Parent menu item is the Services LI A Menu item

So right now when you hover the parent menu item Services, it makes the Child menu come into view as shown in the image below. Once you move the cursor off of the Parent menu item or off of the child item itself, it then hides the child menu again instantly.

My goal is to modify it some way to make the child menu hide after a couple seconds instead of instantly. If I HAVE to use JavaScript to achieve this goal then that is fine. I would prefer a CSS only solution if it's possible but I just don't know if it is possible or not.

UPDATE
I have extracted the CSS for the menu and put it below as well as made a JSFiddle page with the working code here http://jsfiddle.net/9mX2L/2/

Here is the HTML for the menu...

<nav id="head-nav-menu" class="nav-main" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
  <ul id="nav" class="nav nav-pills">
    <li class="active menu-home"><a href="/">Home</a>
    </li>
    <li class="menu-about"><a href="/about/">About</a>
    </li>
    <li class="menu-projects"><a href="/projects/">Projects</a>
    </li>
    <li class="menu-blog"><a href="/blog/">Blog</a>
    </li>
    <li class="dropdown menu-services"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/services/">Services <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li class="menu-consulting"><a href="/services/consulting/">Consulting</a>
        </li>
        <li class="menu-magento-development"><a href="/services/magento-development/">Magento Development</a>
        </li>
        <li class="menu-wordpress-development"><a href="/services/wordpress-development/">WordPress Development</a>
        </li>
        <li class="menu-sugarcrm-development"><a href="/services/sugarcrm-development/">SugarCRM Development</a>
        </li>
        <li class="menu-web-development"><a href="/services/web-development/">Web Development</a>
        </li>
        <li class="menu-seo"><a href="/services/seo/">SEO</a>
        </li>
      </ul>
    </li>
    <li class="menu-contact"><a href="/contact/">Contact</a>
    </li>
  </ul>
</nav>

CSS

body{
background: #40C8F4;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
}
#head-nav-menu{
  float: right;
  margin-top: 23px;
}
#head-nav-menu li {
  float: left;
  position: relative;
  padding: 0 2px 0 2px;
}
.nav a {
  font-family: 'arial';
  font-size: 18px;
  padding: 8px 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  white-space: nowrap;
  color: #fff;
  opacity: 0.9;
  letter-spacing: 1px;
    text-decoration: none;
    display: block;
}
.menu-contact a {
  border: 2px solid #FFF;
  padding: 8px 18px;
  transition: 0.05s linear;
  -moz-transition: 0.05s linear;
  -webkit-transition: 0.05s linear;
}
.nav .menu-contact a:hover {
  background-color: #FFF;
  color: #797979;
}
#nav ul a {
  font-weight: 100;
    display: block;
}
.nav a:hover,
.nav > .active a {
  opacity: 1;
  background-color: #3DBCE6;
}
.nav > .active li a {
  background-color: inherit;
}
.tinynav {
  display: none;
  width: 100%;
  margin-top: .5em;
  margin-bottom: .6em;
}
.nav li.button a {
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-top: 5px;
  padding: 8px 18px;
  font-family: 'ProximaNova-bold', Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin-left: 16px;
  color: #FFF !important;
}
.nav li.button a:hover {
  background-color: #FFF;
  opacity: 1;
  color: #444 !important;
}


/* Navigation > Dropdown Menus */
#nav .dropdown-menu,
#nav .children {
  display: none;
  padding: 0;
  position: absolute;
  z-index: 99999;
  border: 1px solid #86DEFC;
  width: 333%;
  right: 2px;
  /* left: -239%; */
  top: 38px;
  background-color: #F2F9FC;
}
#nav .dropdown-menu li {
  width: 195px;
  float: left;
  display: inline-block;
  /*width: 50%;*/
}
.nav .dropdown-menu a {
  color: #030303;
}
#nav li:hover > ul,
#nav ul li:hover > ul,
.dropdown:hover > ul {
  display: inline-block;
  -webkit-animation: fadeDown 250ms ease;
  -moz-animation: fadeDown 250ms ease;
  -ms-animation: fadeDown 250ms ease;
  -o-animation: fadeDown 250ms ease;
  animation: fadeDown 250ms ease;
  background-color: #fff;
  color: #000;
  border: 1px solid #E9E9E9;
  border-top: none;
  margin-top: 1px;
transition-delay: 9s;
-webkit-transition-delay: 9s; /* Safari */
}
#nav .dropdown-menu ul,
#nav .children ul {
  left: 99.75%;
  top: -1px;
}
#nav ul li,
#nav ul ul li {
  margin-left: 0;
}
#nav ul li:first-child,
#nav ul ul li:first-child {
  border-top: none;
}
#nav ul a,
#nav ul ul a {
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  padding: 10px;
  display: inline-block;
  min-width: 125px;
  border-bottom: none;
  margin-bottom: 0 !important;
  width: 100%;
  letter-spacing: 1px;
  font-family: arial;
}
#nav ul a:hover,
#nav ul ul a:hover {
  color: #098EB9 !important;
  background: none;
}
#nav ul ul.dropdown-menu a:hover {
  width: 100%;
  color: #63E924 !important;
  border-bottom: none;
}
#nav li.current_page_item ul a,
#nav li.current-menu-parent ul a,
#nav li.current_page_parent ul a {
  color: #000;
  font-weight: 700;
}
#nav ul li.current-menu-item a {
  color: #e9242e !important;
}
#head-nav-menu .nav li:hover a.dropdown-toggle {
  background: #fff;
  color: #000;
  opacity: 1;
  border-right: 1px solid #E7E7E7;
}
.nav .dropdown a:hover {
  opacity: 1;
  background-color: #fff;
}
#nav .dropdown-menu li:hover {
  background: #F8F8F8;
}

Answer 1

Delete you animation, display and transition-delay property. Add instead transition:all 0.5s ease 0s, visibility respectively(nothing for transition delay).

body{
background: #40C8F4;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
   
}
#head-nav-menu{
  float: right;
  margin-top: 23px;
}
#head-nav-menu li {
  float: left;
  position: relative;
  padding: 0 2px 0 2px;
}
.nav a {
  font-family: 'arial';
  font-size: 18px;
  padding: 8px 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  white-space: nowrap;
  color: #fff;
  opacity: 0.9;
  letter-spacing: 1px;
    text-decoration: none;
    display: block;
}
.menu-contact a {
  border: 2px solid #FFF;
  padding: 8px 18px;
  transition: 0.05s linear;
  -moz-transition: 0.05s linear;
  -webkit-transition: 0.05s linear;
}
.nav .menu-contact a:hover {
  background-color: #FFF;
  color: #797979;
}
#nav ul a {
  font-weight: 100;
    display: block;
}
.nav a:hover,
.nav > .active a {
  opacity: 1;
  background-color: #3DBCE6;
}
.nav > .active li a {
  background-color: inherit;
}
.tinynav {
display:none;
    width: 100%;
  margin-top: .5em;
  margin-bottom: .6em;
  
}
.nav li.button a {
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-top: 5px;
  padding: 8px 18px;
  font-family: 'ProximaNova-bold', Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin-left: 16px;
  color: #FFF !important;
}
.nav li.button a:hover {
  background-color: #FFF;
  opacity: 1;
  color: #444 !important;
}


/* Navigation > Dropdown Menus */
#nav .dropdown-menu,
#nav .children {
  visibility:hidden;
  padding: 0;
  position: absolute;
  z-index: 99999;
  border: 1px solid #86DEFC;
  width: 333%;
  right: 2px;
  /* left: -239%; */
  top: 38px;  
  transition:all 0.5s ease 0s;
  background-color: #F2F9FC;
}
#nav .dropdown-menu li {
  width: 195px;
  float: left;
  display: inline-block;
  /*width: 50%;*/
}
.nav .dropdown-menu a {
  color: #030303;
}
#nav li:hover > ul,
#nav ul li:hover > ul,
.dropdown:hover > ul {
  visibility:visible;
  background-color: #fff;
  color: #000;
  border: 1px solid #E9E9E9;
  border-top: none;
  margin-top: 1px;

}
#nav .dropdown-menu ul,
#nav .children ul {
  left: 99.75%;
  top: -1px;
}
#nav ul li,
#nav ul ul li {
  margin-left: 0;
}
#nav ul li:first-child,
#nav ul ul li:first-child {
  border-top: none;
}
#nav ul a,
#nav ul ul a {
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  padding: 10px;
  display: inline-block;
  min-width: 125px;
  border-bottom: none;
  margin-bottom: 0 !important;
  width: 100%;
  letter-spacing: 1px;
  font-family: arial;
}
#nav ul a:hover,
#nav ul ul a:hover {
  color: #098EB9 !important;
  background: none;
}
#nav ul ul.dropdown-menu a:hover {
  width: 100%;
  color: #63E924 !important;
  border-bottom: none;
}
#nav li.current_page_item ul a,
#nav li.current-menu-parent ul a,
#nav li.current_page_parent ul a {
  color: #000;
  font-weight: 700;
}
#nav ul li.current-menu-item a {
  color: #e9242e !important;
}
#head-nav-menu .nav li:hover a.dropdown-toggle {
  background: #fff;
  color: #000;
  opacity: 1;
  border-right: 1px solid #E7E7E7;
}
.nav .dropdown a:hover {
  opacity: 1;
  background-color: #fff;
}
#nav .dropdown-menu li:hover {
  background: #F8F8F8;
}

<nav id="head-nav-menu" class="nav-main" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
  <ul id="nav" class="nav nav-pills">
    <li class="active menu-home"><a href="/">Home</a>
    </li>
    <li class="menu-about"><a href="/about/">About</a>
    </li>
    <li class="menu-projects"><a href="/projects/">Projects</a>
    </li>
    <li class="menu-blog"><a href="/blog/">Blog</a>
    </li>
    <li class="dropdown menu-services"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/services/">Services <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li class="menu-consulting"><a href="/services/consulting/">Consulting</a>
        </li>
        <li class="menu-magento-development"><a href="/services/magento-development/">Magento Development</a>
        </li>
        <li class="menu-wordpress-development"><a href="/services/wordpress-development/">WordPress Development</a>
        </li>
        <li class="menu-sugarcrm-development"><a href="/services/sugarcrm-development/">SugarCRM Development</a>
        </li>
        <li class="menu-web-development"><a href="/services/web-development/">Web Development</a>
        </li>
        <li class="menu-seo"><a href="/services/seo/">SEO</a>
        </li>
      </ul>
    </li>
    <li class="menu-contact"><a href="/contact/">Contact</a>
    </li>
  </ul>
</nav>

Answer 2

Add this to the CSS of your submenu:

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

Here's a chart that shows browser compatibility: CanIUse CSS3 Transitions