Drop down disappears on hovering on menu

Drop down

    disappears on hovering on menu

    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>

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

.
.
.
.