can't put two divs beside each other

I have two divs one inside of the other, now i want to put show the child div called subMenu appears beside the div father, when the event was mouseEnter in the div father called prueba. The event works well my problem it's with the css I'm stock. how can i solve this?

my html

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

My Js

$(document).ready(initializ开发者_如何学JAVAe);

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 I don't want that the div that have the text other thing move of his position. i want that subMenu appears over this div

Instead of creating the submenu everytime, you can check if its exists just use it. In the hideSubMenu method instead or remove you can just hide it.

Try this

Working 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();
  }

Here you go, try this.

$(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