单击跨度时创建下拉菜单

Question

我想在用户点击span元素时显示一个下拉菜单，然后当用户将鼠标移出菜单时菜单消失。我试过js，但我不能做我想要的。这可能吗？这是我的代码（我使用helpbatch函数以小写字母转换大写字母，我知道我可以用另一种方式完成）：

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

  document.getElementById("showbatch").style.display = "inline-block";
  document.getElementById("showbatch").innerHTML = text;
}

function helpbatch(vari, storage) {
  var dic = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "Y", "Z", "W", "X"];
  var dicmic = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "y", "z", "w", "d"];

  var a = storage[vari].split(" ");
  var fin = "";
  var spl = 0;

  for (i = 0; i < a.length; i++) {
    var ans = "";
    spl = a[i].split("");

    for (j = 0; j < spl.length; j++) {
      var help = 0;
      for (m = 0; m < dic.length; m++) {
        if (spl[j] === dic[m]) {
          ans += dicmic[m];
        } else {
          help++;
        }
      }
      if (help === 26) {
        ans += spl[j];
      }
    }
    if (i < a.length - 1) {
      fin += ans + "-";
    } else {
      fin += ans;
    }
  }
  return fin;
}






function batchleave(x) {
  setTimeout(function() {
    x++;
    document.getElementById("showbatch").style.opacity = "0." + (10 - x);
    if (10 - x === 0) {
      document.getElementById("showbatch").style.display = "none";
      document.getElementById("batch").style.float = "none";
    }
    if (x < 10) {
      batchleave(x);
    }
  }, 30);
}

<div>
  <span class="project" id="batch" onclick="batch()" title="Press to see the projects">Projects</span>
</div>
<div>
  <div onmouseleave="batchleave(0)" id="showbatch" style="background-color: #300a62; box-shadow: 2px 2px 3px black; color: aliceblue; display: none; line-height: 1.5; padding: 10px; position: absolute; z-index: 10;">
  </div>