Php 下拉式搜索菜单列表没有放在应该放的地方

我有4个相互依赖的搜索下拉菜单。我有两个问题：

当我在任何下拉菜单中按下一个键时，mysql连接的列表会下拉，但不会在实际的“输入类型搜索框”下面

此外，当按下第一个菜单中的一个键时，其他菜单会移动到下拉列表的下方，但菜单/输入类型搜索框实际上应保持彼此相邻的固定状态

这可能只是一个简单的css问题，但我现在尝试了很多东西，很长一段时间都无法让它工作，所以我发布了它。谢谢你的帮助

下面是代码：HTML

<input type="text" class="autosuggest" id="autosuggest1" placeholder="Select Continent...">
    <div class="type">
        <ul class="result" id="result1"></ul>
    </div>
<input type="text" class="autosuggest" id="autosuggest2" placeholder="Select Country...">
    <div class="type">
        <ul class="result" id="result2"></ul>
    </div>
<input type="text" class="autosuggest" id="autosuggest3" placeholder="Select Area...">
    <div class="type">
    <ul class="result" id="result3"></ul>
    </div>
<input type="text" class="autosuggest" id="autosuggest4" placeholder="Select Category...">
    <div class="type">
    <ul class="result" id="result4"></ul>
    </div>

JS

这里还有PHP

<?php
include '../core/db/connectdropdown.php';

if (isset($_POST['continent']) == true && empty($_POST['continent']) == false) {
$continent = mysql_real_escape_string($_POST['continent']);
$query = mysql_query("SELECT DISTINCT `continent` FROM `area` WHERE `continent` LIKE   '$continent%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    echo '<li>', $row['continent'], '</li>';
}   
}

if (isset($_POST['country']) == true && empty($_POST['country']) == false) {
$country = mysql_real_escape_string($_POST['country']);
$query = mysql_query("SELECT DISTINCT `country` FROM `area` WHERE `country` LIKE     '$country%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    $dbcountry = $row['country'];

}   
}

if (isset($_POST['area']) == true && empty($_POST['area']) == false) {
$area = mysql_real_escape_string($_POST['area']);
$query = mysql_query("SELECT DISTINCT `area` FROM `area` WHERE `area` LIKE '$area%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    echo '<li>', $row['area'], '</li>';
}   
}

if (isset($_POST['category']) == true && empty($_POST['category']) == false) {
$category = mysql_real_escape_string($_POST['category']);
$query = mysql_query("SELECT `category` FROM `categories` WHERE `category` LIKE '$category%'");
while (($row = mysql_fetch_assoc($query)) !== false) {
    echo '<li>', $row['category'], '</li>';
}   
}

?>

---

听起来您可能也有一些JavaScript问题。脚本是按ID还是按类附加列表的结果？只是好奇

我没有发现你发布的CSS和HTML有任何明显的问题，但我尝试在这篇文章中稍微改变一下HTML和CSS的结构。也许它能改善你的生活：

如果使用我的CSS/HTML会发生什么。你得到更好的结果了吗？（也许更糟？）

如果这对你没有帮助，你能发布你的JavaScript来处理菜单的创建吗

编辑：

您的PHP中似乎存在问题：

在其他Ajax处理程序代码块中，您有：

echo '<li>', $row['continent'], '</li>';

尝试将该行替换为以下内容：

echo '<li>', $row['country'], '</li>';

echo'
，$row['country']，“
”；

谢谢Matthew，是的，还是一样。这是我的js。你有问题。是的，它一定是其他的东西，因为我也认为我尝试了css中的所有东西。不确定为什么我以前没有想到它，但你能在你从菜单中选择一些东西后发布下拉列表的HTML源代码吗。

echo '<li>', $row['continent'], '</li>';

$dbcountry = $row['country'];

echo '<li>', $row['country'], '</li>';