ul标签顶部的问题

我制作了一个菜单，但"ul"标记的顶部有问题。这是我的代码：

var a = document.getElementById("hide");
var outside = "false";
var verid = "false";
function showjs() {
  if (verid === "false") {
    if (visibil() === "false") {
      a.style.display = "inline-block";
    } else {
      batchleave(0);
    }
  }
}
function hidejs() {
  if (visibil() === "true" & outside === "true") {
    batchleave(0);
  }
}
function visibil() {
  if (a.style.display === "none") {
    return "false";
  } else {
    return "true";
  }
}
function batchleave(x) {
  setTimeout(function() {
    x++;
    a.style.opacity = "0." + (10 - x);
    if (10 - x === 0) {
      a.style.display = "none";
    }
    if (x < 10) {
      batchleave(x);
    }
  }, 30);
}


function batch() {
  var projects = ["Batch Script Tutorial", "Manage your PC", "Yahoo joke"];
  var text = "";
  var i;
  for (i = 0; i < projects.length; i++) {
    text += "<li><a href='http://www.programming-multilang.tk/p/" + helpbatch(i, projects) + ".html'>" + projects[i] + "</a></li>" + '<hr style="border-color: rgb(61, 34, 126)">';
  }
  document.getElementById("hide").style.opacity = "1";
  document.getElementById("hide").innerHTML = text;
}
function helpbatch(vari, storage) {
  var a = storage[vari].split(" ");
  var fin = "";
  for (i = 0; i < a.length; i++) {
    if (i < a.length - 1) {
      fin += a[i].toLowerCase() + "-";
    } else {
      fin += a[i].toLowerCase();
    }
  }
  return fin;
}

.project {
  background-color: #5318a0;
  box-shadow: 2px 2px 3px black;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 7px 15px;
  cursor: pointer;
}
.project:link {
  background-color: #5318a0;
  border-radius: 2px;
  box-shadow: 2px 2px 3px black;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 7px 15px;
}
.project:visited {
  background-color: #5318a0;
  border-radius: 2px;
  box-shadow: 2px 2px 3px black;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 7px 15px;
}
.project:hover {
  background-color: #8358ba;
  border-radius: 2px;
  box-shadow: 2px 2px 3px black;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 7px 15px;
}
.project:active {
  background-color: #462076;
  border-radius: 2px;
  box-shadow: 2px 2px 1px white;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 5px 13px;
}
.menu ul {
  list-style: none;
}
.menu li {
  position: relative
}
.cl-menu,
ul {
  margin: 0;
  padding: 0
}
.menu {
  display: inline-block
}
#hide>li {
  white-space: nowrap;
}
#hide {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #300a62;
  box-shadow: 2px 2px 3px black;
  color: aliceblue;
  line-height: 1.5;
  padding: 10px;
  z-index: 10;
  margin: 0
}

<div class="menu">
  <ul id="cl-menu">
    <li onclick="showjs();batch()" onmouseleave="outside='true';" onmouseenter="outside='false';" id="batch" title="Press to see the projects"><span class="project">Project</span>
      <ul id="hide" onmouseenter="verid='true';" onmouseleave="verid='false';">
      </ul>
    </li>
  </ul>
</div>

我觉得js也有问题。id="hide"的ul给我的顶部带来了一些问题。我该如何解决此问题？