如何让搜索栏的下拉建议框垂直显示？

问题核心是导航栏父级<ul>的Flex布局或全局样式干扰了搜索建议列表的默认排版，导致选项水平排列。以下是修复后的完整代码及关键修改说明：

修复后HTML（结构无需调整） #

<header>
    <nav>
        <div class="logo">
            <a href="A.html">
                <img src="logo.png" alt="Logo" style="height: 50px;">
            </a>
        </div>
        <ul class="nav-list">
            <li><a href="A.html">A</a></li>
            <li><a href="B.html">B</a></li>
            <li><a href="C.html">C</a></li>
            <li style="flex-grow: 1; position: relative;">
                <input type="text" id="search-bar" placeholder="Search..." autocomplete="off" style="width: 100%;">
                <ul id="suggestions" class="suggestions"></ul>
            </li>
        </ul>
    </nav>
</header>

修复后CSS（补充缺失样式+修正排版） #

/* 补充导航栏Flex布局样式（原代码缺失的关键部分） */
.nav-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    gap: 20px;
}

#search-bar {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

#suggestions {
    border: 1px solid #ccc;
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    position: absolute;
    width: calc(100% - 12px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    left: 0;
    top: 100%; /* 固定在搜索框正下方 */
    padding: 0; 
    margin: 0; 
    list-style-type: none;
    display: block; /* 强制块级布局，避免继承Flex */
}

#suggestions li {
    padding: 10px;
    cursor: pointer;
    list-style: none;
    color: #000;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
    display: block; /* 确保每个选项独占一行 */
    width: 100%;
    box-sizing: border-box;
}

#suggestions li:hover {
    background-color: #f0f0f0;
}

关键修改点 #

1. 补充导航栏样式：给导航<ul>添加nav-list类，明确Flex布局规则，避免默认样式冲突；
2. 强制建议列表为块级：给#suggestions设置display: block，防止继承父级或全局的Flex布局；
3. 固定下拉位置：添加top: 100%，确保建议框紧贴搜索框下方显示；
4. 保证选项垂直排列：保留#suggestions li的display: block，确保每个建议项独占一行。

JavaScript代码无需调整，原逻辑可正常运行。

内容的提问来源于stack exchange，提问作者Devin England