在菜单上悬停时，下拉<ul>消失

我正在使用css创建一个下拉菜单 . 它还有一个嵌套在<li>中的子菜单 . 当我将鼠标悬停在<li>上时，子菜单即将到来，但当我将光标移动时，它会消失 .

请帮我解决这个问题 .

jsFiddle这是小提琴链接

.nav-bar {
  background:#ccc;
  height:38px;
  width:100%;
}
.nav-bar .nav {
  list-style-type:none;
}
.nav li {
  float:left;
  width:auto;
  font:bold 14px/38px Arial, Helvetica, sans-serif;

}
.nav li a {
  padding:0 22px;
  color:#fff;
  display:block;
  text-decoration:none;
}
.nav li a:hover {
  background-color:#231f20;
  color:#66ccff;
}
.nav li  a.activemenu  {
  padding:0 22px;
  background-color:#231f20;
  color:#66ccff;
  display:block;
  text-decoration:none;
}
.nav li.spacer {
  background:url(../images/nav-spacer.jpg) left top no-repeat;
  width:2px;
  height:38px;
  padding:0;
}
.nav li span.arrow {
  margin:0;
  padding-left:5px;
  height:12px;
  font-size:11px;
}
/** sub nav **/
ul.sub-nav {
  list-style-type:none;
  display:none;
  position:absolute;
  background:#f2f2f2;	
  border:solid 1px #bababa;
  border-radius:5px;
  -moz-border-radius:5px;
  padding:10px 0;
  margin-top:5px;
  box-shadow:2px 2px 2px #333;
}
ul.sub-nav li {
  float:none;
}
ul.sub-nav li a {	
  color:#333;
  text-decoration:none;
  font:normal 14px/26px Arial, Helvetica, sans-serif;
  display:block;
}
ul.sub-nav li a:hover {
  background-color:#7f7f7f;
  color:#fff;
}

.nav li:hover ul.sub-nav {
  display:block;
}
ul.sub-nav span {
  position:absolute;
  top:-24px;
  left:20px;
  display:block;
}

<div class="nav-bar">
  <ul class="nav">
    <li><a href="#">Package</a></li>
    <li class="spacer"></li>                
    <li><a href="#">Investigation<span class="arrow">▼</span></a>
      <ul class="sub-nav">
        <span><img src="http://i.stack.imgur.com/z88Pm.png" alt="" /></span>
        <li><a href="#">Project</a></li>
        <li><a href="#">Project Description</a></li>
        <li><a href="#">Project Account Type</a></li>
        <li><a href="#">Project Resources</a></li>
      </ul>
    </li>
    <li class="spacer"></li>
    <li><a href="#">Messaging</a></li>
    <li class="spacer"></li>
    <li><a href="#">Billing</a></li>
  </ul>
</div>