CSS-絕對定位問題

Question

我想了解為什么下拉菜單的列表未正確調整到導航項目的左下邊緣。

（我已經嘗試向.dropdown-menu添加left: 0px ，它對於水平間隙正常工作，但是我不知道如何處理垂直間隙。）

 .navbar { padding-left: 0; list-style-type: none; background-color: #252525; font-size: 0; /* to remove white-space gap between child blocks */ } .navitem { font-size: 1.0rem; /* root eM*/ margin: 0; padding: 10px; text-align: center; display: inline-block; color: white; cursor: pointer; } .navitem:hover { background-color: black; } .dropdown { position: relative; border: 1px solid red; } .dropdown-menu { padding: 0; /*left:0px;*/ position: absolute; min-width: 100%; text-align: left; list-style-type: none; background-color: #252525; } 

 <ul class="navbar"> <li class="navitem link">Link1</li> <li class="navitem link">Link2</li> <li class="navitem link">Link3</li> <li class="navitem dropdown"> <div>Dropdown</div> <ul class="dropdown-menu"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </li> </ul> 

Answer 1

加top: 100%; 這將使下拉菜單開始在下拉列表的底部。

並添加right: 0; 或left:0; 使它從下拉菜單的兩側開始。

查看代碼段：

 .navbar { padding-left: 0; list-style-type: none; background-color: #252525; font-size: 0; /* to remove white-space gap between child blocks */ } .navitem { font-size: 1.0rem; /* root eM*/ margin: 0; padding: 10px; text-align: center; display: inline-block; color: white; cursor: pointer; } .navitem:hover { background-color: black; } .dropdown { position: relative; border: 1px solid red; } .dropdown-menu { padding: 0; /*left:0px;*/ position: absolute; min-width: 100%; text-align: left; list-style-type: none; background-color: #252525; top: 100%; right: 0; } 

 <ul class="navbar"> <li class="navitem link">Link1</li> <li class="navitem link">Link2</li> <li class="navitem link">Link3</li> <li class="navitem dropdown"> <div>Dropdown</div> <ul class="dropdown-menu"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> </li> </ul>