彈出式菜單是隱藏其父文本？

Question

我有一個彈出式菜單，顯示/隱藏當div被懸停時。顯示/隱藏菜單正常工作。然而，div中有文字「Square」，當我在代碼中添加菜單時，它會消失。

的index.html

<div id= "squareDiv" style="width: 100px; height:100px; border:2px solid #a1a1a1;" > 
    Square 
</div> 

我的JS

//Add list items to the div 
$("#squareDiv").html(
    "<ul class='list_menu'><li><a href='firefox.com'>Maya Agriculture</a></li>"+ 
    "<li><a href='firefox.com'>Maya Agriculture Crossword</a></li>"+ 
    "<li><a href='firefox.com'>Inca Agriculture</a></li>"+ 
    "<li><a href='firefox.com'>Inca Agriculture Crossword</a></li>"+ 
    "</ul>" 
); 

$("#squareDiv").hover(function() { 
    $('ul.list_menu').slideDown('medium',function() { 
    $(this).clearQueue(); 
    }); 
}, function() { 
    $('ul.list_menu').slideUp('medium',function() { 
    $(this).clearQueue(); 
    }); 
}); 

Answer 1

使用append(...)代替html(...)，html()替換內容