Can anyone help me troubleshoot my CSS so that the list appears below the input field?
The nested menu in this example is positioned too far to the left and slightly too high. It should be aligned with the bottom of the containing menu.
.combobox-wrapper {
position: relative;
width: 20em;
min-height: 1.5em;
display: flex;
align-items: center;
width: 100%;
display: flex;
flex-direction: row;
}
.combobox-label {
width: 50%;
padding-top: 0.5em;
}
.combobox-input {
font-size: 16px;
font-weight: normal;
height: 30px;
padding: 4px 10px;
width: 50%;
}
.combobox-options {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
max-height: 15em;
overflow-y: auto;
left: 0;
top: calc(100% + 0.25em);
z-index: 100;
display: block;
}
.combobox-option {
padding: 0.25em 0.5em;
cursor: pointer;
position: relative;
}
<div class="combobox-wrapper">
<label for="combobox-input" class="combobox-label">
Countries
</label>
<input id="combobox-input" />
<ul id="combobox-listbox" role="listbox" class="combobox-options">
<li tabindex="0" id=":rl:-BZ" role="option" value="BZ" class="combobox-option highlighted"><span>Belize</span></li>
<li tabindex="0" id=":rl:-BJ" role="option" value="BJ" class="combobox-option"><span>Benin</span></li>
</ul>
</div>