html - CSS - 如何正确放置绝对 div

Question

我有以下代码:

.menu{
 border: solid red; 
 border-width: 1px 1px 0px 1px;
 background-color:black;
 color:white;
 width: 60px;
}

.dropdown{
 position:absolute;
 background-color: grey;
 width:100px;
}

.dropdown ul{
 list-style:none;
 padding:10px;
 margin: 0;
}

.zoom{
  zoom:300%;
}

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

如何在不移除边框的情况下将下拉菜单放置在与父菜单相同的 x 位置？我已经尝试过 'box-sizing: border-box'，但不知何故它不起作用。

Answer 1

在父元素和子元素上设置 position: relative set position left 为与父元素的左边框宽度相同的负值。

.menu {
  border: solid red;
  border-width: 1px 1px 0px 1px;
  background-color: black;
  color: white;
  width: 60px;
  position: relative;
}
.dropdown {
  position: absolute;
  background-color: grey;
  width: 100px;
  left: -1px;
}
.dropdown ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}
.zoom {
  zoom: 300%;
}

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