下拉搜索菜单列表不会丢弃在应有的位置

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

1. 当我在任何下拉菜单中按下一个键时，mysql 连接的列表会下降但不会在实际的"输入类型搜索框"下方。

2. 此外，当我在第一个菜单中按一个键时，其他菜单在下拉列表下方移动，但菜单/"输入类型搜索框"实际上应保持彼此相邻。

这可能只是一个简单的 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>

.CSS

    #search_line{
        margin-top: 20px;
        display: inline;
    }
.autosuggest, .type, .result{
    width: 150px;
}
#autosuggest1{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
#autosuggest2{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
#autosuggest3{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
#autosuggest4{
    padding: 4px;
    border: 1px solid blue;
    background: white;
    float: left;
}
.result{
    width: 150px;
    list-style: none;
}
.result li{
    padding:5px;
    border:1px solid #000;
    border-top: 0;
    cursor: pointer;
}

.JS

$(document).ready(function() { 
$('#autosuggest1').keyup(function() {
    var continent = $(this).attr('value');
    $.post('php/dropdown.php', {continent:continent},  function(data) {
        $('#result1').html(data);
        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest1').attr('value', result_value);
            $('#result1').html('');
        });
    });
});
$('#autosuggest2').keyup(function() {
    var country = $(this).attr('value');
    $.post('php/dropdown.php', {country:country}, function(data) {
        $('#result2').html(data);
        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest2').attr('value', result_value);
            $('#result2').html('');
        });
    });
});
$('#autosuggest3').keyup(function() {
    var area = $(this).attr('value');
    $.post('php/dropdown.php', {area:area}, function(data) {
        $('#result3').html(data);
        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest3').attr('value', result_value);
            $('#result3').html('');
        });
    });
});
$('#autosuggest4').keyup(function() {
    var category = $(this).attr('value');
    $.post('php/dropdown.php', {category:category}, function(data) {
        $('#result4').html(data);
        $('.result li').click(function() {
            var result_value = $(this).text();
            $('#autosuggest4').attr('value', result_value);
            $('#result4').html('');
            $('#result4').focusout('');
        });
    });
});
});

这里还有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>';
}   
}
?>