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，并将子设置位置设置为与父元素的左边界宽度相同的负值。

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

Answer 2

保持父为positon:relative，并给予孩子position:absolte与top:100%;和left:-1px（其中-1取，因为边框的宽度为1左）

这里是t他工作的片断：

.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; 
 
    top:100% 
 
} 
 
.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>