Question

So, I’m NOT using the jQuery UI AutoComplete as I have a simple application.
However, in my final touches on the input box, I’m stuck on a simple CSS issue.

I want the list-item(s) (created by the jQuery .post) to highlight on hover.

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>';
        }
    }
}

Finally, 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;
}

Here is what chrome reports after the AJAX request:

Answer 1

So the <div id="space"></div> was simply getting in the way.

Remove and adjust with padding