html - 如何对齐绝对div

Question

我有以下代码:

body{
  margin: 10px;
}
  .menu {
  border: solid black;
  border-width: 1px 1px 0px 1px;
  background-color: black;
  color: white;
  width: 300px;
  position: relative;
  padding: 12px;
}

.menu:hover{
  background-color: white;
  color: black;
}
.dropdown {
  position: absolute;
  background-color: white;
  width: 200px;
  left: -1px;
  border: solid black;
  border-width: 0px 1px 1px 1px;
  color:black;
  top:100%;
}
.dropdown ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}
.zoom {
  zoom: 200%;
}

<div class="menu zoom">
  Click me
  <div class="dropdown">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

有一个换行符(在左边)。我怎样才能解决这个问题？在某些缩放级别上它没有显示，但在我的默认缩放级别上它在我的网站上非常清楚。我在几个网络浏览器上测试了它，它们都有这个问题。

Answer 1

body{
  margin: 10px;
}
  .menu {
  border: solid black;
  border-width: 1px 1px 0px 1px;
  background-color: black;
  color: white;
  width: 200px;
  position: relative;
}

.menu:hover{
  background-color: white;
  color: black;
}
.dropdown {
  position: absolute;
  background-color: white;
  width: 200px;
  left: -1px;
  border: solid black;
  border-width: 0px 1px 1px 1px;
  color:black;
  top:100%;
}
.dropdown ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}
.zoom {
  zoom: 200%;
}

<div class="menu zoom">
  Click me
  <div class="dropdown">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>