不能把兩個div放在一起

Question

我有兩個div一個在另一個裏面，現在我想把放在div div旁邊的div叫做subMenu，當事件是mouseEnter在div的父親叫prueba 。這個事件很好地解決了我的問題，它與我股票的CSS有關。我該如何解決這個問題？

我的HTML

<div id="prueba" class="ui-state-hover" style="width:150px;height:20px;float:left">category 
</div> 
<div style="float:left"> other thing </div> 

我的js

$(document).ready(initialize); 

function initialize() { 
    $('#prueba').hover(showSubMenu, hideSubMenu); 
} 
function showSubMenu() { 
    var subMenu = '<div id="subMenu" class="ui-state-hover" style="width:150px;position:relative;top:0px;left:100%">subCategory</div>'; 
    $('#prueba').append(subMenu); 
} 

function hideSubMenu() { 
    $("#subMenu").remove(); 
} 

here's my live demo

UPDATE 我不希望有文字的股利other thing他的立場的舉動。我希望subMenu出現在這個div上

Answer 1

而不是創建子菜單每次，您可以檢查是否存在它只是使用它。在hideSubMenu方法代替或者remove你可以只用hide它。

試試這個

工作demo

$(document).ready(initialize); 

    function initialize() { 
    $('#prueba').hover(showSubMenu, hideSubMenu); 
    } 
    function showSubMenu() { 
    if($("#subMenu").length == 0){ 
     $(document.body).append('<div id="subMenu" class="ui-state-hover" style="width:150px; float: left;">subCategory</div>'); 
    } 
     $("#subMenu").css({ 
      position:'absolute', 
      top: $('#prueba').offset().top, 
      left: ($('#prueba').offset().left + $('#prueba').width()) 
     }).show(); 
    } 

    function hideSubMenu() { 
    $("#subMenu").hide(); 
    } 

Answer 2

在這裏，你去試試這個。

$(document).ready(initialize); 

function initialize() { 
    $('#prueba').hover(showSubMenu, hideSubMenu); 
} 
function showSubMenu() { 
    var subMenu = '<div id="subMenu" class="ui-state-hover" style="width:150px; float: left; position: relative; top: -20px; left: 150px;">subCategory</div>'; 
    $('#prueba').append(subMenu); 
} 

function hideSubMenu() { 
    $("#subMenu").remove(); 
} 

new demo