I'm using ajax to dynamically populate a menu. The problem is the dynamically created elements do not follow the CSS rules, although they're created with the right classname. This is surprising.

Here's my HTML:

<div id='menu1'>
<ul class='menu'>
<?php
$sql = /// /* some sql  string, which works */
$result = mysql_query($sql);
    while($row = mysql_fetch_array( $result ))
    {
        $prod_id = $row['product_id'];      
        $prod_name = $row['product_name'];      
        echo "<li data-title='$prod_id' class='menu1_item'>".$prod_name."</li> ";
    }
?>
</ul>
</div>

<div id='menu2'>
<ul class='menu'>
</ul>
</div>

<div id='menu3'>
<ul class='menu'>
</ul>
</div>

Here's my jquery:

    $(".menu1_item").click( function() {
    $.ajax({
    type: "POST",
    data: { m: '2', id: $(this).attr('data-title') },
    url: "fetch_designs.php",
    success: function(msg){
            if (msg != ''){
            $("#menu2").html(msg).show();
            $(".menu2_item").bind('click',function() {
                        $.ajax({
                        type: "POST",
                        data: { m: '3', id: $(this).attr('data-title') },
                        url: "fetch_designs.php",
                        success: function(msg){
                        if (msg != ''){
                        $("#menu3").html(msg).show();
                            }
                            }
                        });
                    //end menu2 click
                    });
                //end if
                }
            //end success
            }
        });
    //end menu1 click
    });

My CSS is as follows:

ul.menu li
{
    cursor:pointer;
    list-style: none;
}

#menu1, #menu2, #menu3
{
    margin:50px;
    position:relative;
    display:block;
    float:left;
}

.menu1-item .menu2-item .menu3-item
{
    padding:4px;
    background-color:lightgray;
    color:black;
    cursor:pointer;
}