Sub Menu disappearing when trying to hover

I am trying to recreate a website template and I have some issues with my menu and sub-menu. When I want to hover on the sub-menu it disappears , and I know it might be from that gap (margin) , but what can I do without having to delete the margin?

This is my full code: http://dontpad.com/claustack

This is the template that I am trying to reproduce: https://www.templatemonster.com/demo/69211.html

<body>
 <div class="nav center">
 <img src="logo.png"/ id="logo">
 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Departments <span style="font-size:12px">&#8744; </span></a>
      <div class="subMenuBox1">
        <ul class="subMenu1">
          <li><a href="#">Dental</a></li>
          <li><a href="#">Cardiology</a></li>
          <li><a href="#">Neurology</a></li>
          <li><a href="#">Pediatric</a></li>
        </ul>

        <ul class="subMenu2">
          <li><a href="#">Pulmonary</a></li>
          <li><a href="#">Ophtalmology</a></li>
          <li><a href="#">Traumatology</a></li>
          <li><a href="#">Diagnostics</a></li>
        </ul>
      </div>
    </li>

    <li><a href="#">Timetable</a></li>
    <li><a href="#">Pages <span style="font-size:12px">&#8744; </span></a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>
</body>

CSS :

html,body {
 margin:0;
 width:100%;
 height:100%;
 padding:0;
 }

.center {
  margin:0 auto;
  display:table;
  }

li {
 list-style: none;
}

#logo {
 float:left;
 position:absolute;
 left:-350px;
 top:50px;
}

.nav {
  position:relative;
  padding-top:90px;
  padding-bottom:90px;
 }

 .nav ul li {
   float:left;
   font-size:16px;
   padding:0 30px;
 }

 .nav ul li a {
   color:black;
  }

 .nav ul li a:hover {
   color:#00bb6d;
   text-decoration: none;
  }

 .subMenuBox1 {
   width:330px;
   height:150px;
   border-bottom:2px solid green;
   display:none;
   box-shadow:0 0 5px 0 gray;
   margin-top:30px;
   z-index:999;
   background-color:white;
  }

 .subMenu1 {
   position:absolute;
   z-index:999;
   margin-top:20px;
   }

.subMenu1 li  {
  float:left;
  clear:left;
  margin-bottom:10px;
  }

.subMenu1 li a {
  font-size:12.5px;
  }


 .nav li:hover .subMenu1{
   display:block;
  }

 .nav li:hover .subMenuBox1{
   display:block;
   position:absolute;
    }

Solution

Compensate for the Margin

Your code had a margin of 20px margin-top:20px;. If you set this to zero and use it with padding-top:20px; it works.

It's still a bit messy, but that does that part :)

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.center {
  margin: 0 auto;
  display: table;
}

li {
  list-style: none;
}

#logo {
  float: left;
  position: absolute;
  left: -350px;
  top: 50px;
}

.nav {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
}

.nav ul li {
  float: left;
  font-size: 16px;
  padding: 0 30px;
}

.nav ul li a {
  color: black;
}

.nav ul li a:hover {
  color: #00bb6d;
  text-decoration: none;
}

.subMenuBox1 {
  width: 250px;
  height: 150px;
  border-bottom: 2px solid green;
  display: none;
  box-shadow: 0 0 5px 0 gray;
  margin-top: 30px;
  z-index: 999;
  background-color: white;
}

.subMenu1,
.subMenu2 {
  position: absolute;
  z-index: 999;
  margin-top: 20px;
  padding: 0;
}

.subMenu1 li,
.subMenu2 li {
  float: left;
  clear: left;
  margin-bottom: 10px;
}

.subMenu1 li a,
.subMenu2 li a {
  font-size: 12.5px;
}

.subMenu2 {
  left: 100px;
  /*border-left: 1px solid #333;*/
}

.nav li:hover .subMenuBox1 {
  display: block;
  position: absolute;
  margin-top: 0;
}

<div class="nav center">
  <img src="logo.png" / id="logo">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Departments <span style="font-size:12px">&#8744; </span></a>
      <div class="subMenuBox1">
        <ul class="subMenu1">
          <li><a href="#">Dental</a></li>
          <li><a href="#">Cardiology</a></li>
          <li><a href="#">Neurology</a></li>
          <li><a href="#">Pediatric</a></li>
        </ul>

        <ul class="subMenu2">
          <li><a href="#">Pulmonary</a></li>
          <li><a href="#">Ophtalmology</a></li>
          <li><a href="#">Traumatology</a></li>
          <li><a href="#">Diagnostics</a></li>
        </ul>
      </div>
    </li>

    <li><a href="#">Timetable</a></li>
    <li><a href="#">Pages <span style="font-size:12px">&#8744; </span></a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>