CSS - 绝对定位的问题

Question

我想明白为什么下拉菜单的列表没有调整到导航项目的左底边正确。

（我已经尝试添加left: 0px到.dropdown-menu其工作正常的水平差距，但我没有想法如何处理与垂直）。

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