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>