jQuery自动完成列表Css

Question

所以，我没有使用jQuery UI AutoComplete，因为我有一个简单的应用程序。 但是，在输入框的最后一次触摸中，我遇到了一个简单的CSS问题。

我希望列表项（由jQuery .post创建）在悬停时突出显示。

HTML：

<div id="wrapper">
    <div id="input"><input id="name" type="text" /></div>
    <div id="links"></div>
    <div id="space"></div>
</div>

jQuery的：

<script type="text/javascript">
    $('#name').keyup(function(){
        var name = $('#name').val();
        $.post(
            'process.php',
            {name:name},
            function(output){
                $('#links').html(output).show();
        });
    });
</script>

PHP：

require('config.php');
if(isset($_POST['name'])){
    $name = mysql_real_escape_string(strtolower($_POST['name']));
    if($name==NULL)
        echo "Please Enter a Name";
        else{
        $qName = '%'.$name.'%';
        $query = "SELECT name FROM table WHERE name LIKE '$qName'";
        $result = mysql_query($query);
        $rowCount = mysql_num_rows($result);
        if($rowCount==0)
            echo "No Matches Found!";
        else{
            $name = ucfirst($name);
            echo '<ul>';
            while ($row = mysql_fetch_assoc($result)) {
                echo '<li><a href="#">' . $row["name"] . '</a></li>';
            }
            echo '</ul>';
        }
    }
}

最后，CSS

#links ul {
    list-style-type:none;
    width:150px;
} 
#links li a { 
    color:#000;
    background-color:#EEE;
    display:block;
    text-decoration:none;
}
* html #links li a {  /* make hover effect work in IE */
    width: 150px;
}
#links li a:hover {
    background:#CCC;
}

这是在AJAX请求之后Chrome报告的内容：

Answer 1

所以<div id="space"></div>只是妨碍了。

删除并使用填充调整