无法使两个 div 并排放置

Question

我是一位有用的助手，可以翻译文本。

我有两个div，一个在另一个内部。现在我想在父div中鼠标进入事件时显示子div，名为subMenu，并使其出现在父div旁边。事件已经正常工作，问题在于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();
}

这是我的实时演示

更新 我不希望包含文本“其他事项”的 div 移动其位置。我希望子菜单出现在该 div 上方。

- Jorge

Answer 1

请看这里，试试这个。

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

- Brian Glaz

---

这很好，但我不想移动其他带有文本“other thing”的div。 - Jorge

好的，我编辑了我的答案。看看吧。你可以使用CSS z-index属性使元素彼此重叠。 - Brian Glaz

Answer 2

不必每次都创建子菜单，可以先检查其是否存在再使用。在hideSubMenu方法中，可以用hide代替remove。

试试这个：

演示效果在此

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

- ShankarSangoli

---

你修改后的代码片段比我的解决方案好多了。我只是懒惰地草率完成了它 =p - Brian Glaz