菜单下拉列表未预先隐藏

Question

我在网上找到的一些代码中添加了子菜单。我希望子菜单是一个下拉列表，仅在我将鼠标悬停在相应的<a>上时显示。但是子菜单从一开始就出现了，没有我在它上面盘旋。我做错了什么？

div.menu3 {
  /*width:500px;margin:0 auto;*/
  /*Uncomment this line to make the menu center-aligned.*/
  text-align: center;
  font-size: 0;
  height: 25px;
  *position: relative;
  *top: 1px;
  /*Hacks for IE6 & IE7 */
}
div.menu3 a {
  display: inline-block;
  padding: 0 20px;
  margin-right: 1px;
  /* It specifies the distance between each tab */
  background: #F7F7F7;
  color: Black;
  text-decoration: none;
  font: normal 12px Trebuchet MS;
  line-height: 24px;
  border: 1px solid #CAD0DB;
  border-bottom: 0;
  color: #666;
  vertical-align: top;
  /*ChangeSet#2*/
  text-decoration: none;
}
div.menu3 a:hover,
div.menu3 a.current {
  background: #E9ECF0;
  line-height: 25px;
  color: #000;
}
div.menu3sub {
  height: 6px;
  border: 1px solid #CAD0DB;
  background: #E9ECF0;
}
div.menu3sub a:hover,
div.menu3 a.current {
  background: #E9ECF0;
  line-height: 25px;
  color: #000;
}

<div class="menu3">
  <a href="#1" class="current">Home</a>
  <a href="#2">Employees</a>
  <a href="#3">Department</a>

  <ul>
    <li><a href="#">Add Department</a></li>
    <li><a href="#">Delete Department</a></li>
  </ul>

  <a href="#4">Asset</a>

</div>

<div class="menu3sub"></div>