Drop down <ul> disappears on hovering on menu

Question

I am creating a drop down menu using css only.It also has a sub menu which is nested in the <li>. When i hover on the <li> the sub menus are coming but when i am moving cursor over, it vanishes.

Please help me out this problem.

jsFiddle Here is the fiddle link

.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>

Answer 1

Under .ul.sub-nav, margin-top is the issue. If you remove it, it will work perfectly fine.