html - 菜单下拉菜单未事先隐藏

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>

Answer 1

您的 html 已关闭。所以你的下拉菜单不会正确显示。使用未排序的列表而不是您拥有的列表。这应该为您指明正确的方向。

ul.menu {
  list-style-type: none;
}
ul.menu li {
  display: inline-block;
}
ul.menu li.submenu ul {
  display: none;
  position: absolute;
}
ul.menu li.submenu:hover ul {
  display: block;
}
ul.menu li.submenu ul li {
  display: block;
}

<ul class="menu">
  <li><a href="#1" class="current">Home</a>
  </li>
  <li><a href="#2" class="current">Employees</a>
  </li>
  <li class="submenu"><a href="#3" class="current">Department</a>
    <ul>
      <li><a href="#">Add Department</a>
      </li>
      <li><a href="#">Delete Department</a>
      </li>
    </ul>
  </li>
  <li><a href="#4">Asset</a>
  </li>
</ul>