How to align an absolute div

问题:

I have the following code:

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>

There is a line break(on the left). How can I fix this? On some zoomlevels it is not showing up, but on my default zoom it is very clear on my website. I tested it on serveral webbrowsers and all of them have this problem.

回答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>

回答2:

#somelement {
position: absolute;
left: 0;
right: 0;
margin: auto
}