相对于主菜单项定位子菜单项，但在外部div中

Question

我正在尝试更改网站的子菜单行为。原始子菜单显示为下拉菜单，而我希望它显示在单独的完整水平div中。

到目前为止我已经这样做了：

jQuery(document).ready(function( $ ){
   $(".header").append("<div class='subber'><div class='sub-menu'></div></div>");

$(".main-navigation ul li.menu-item-has-children").mouseover( function() {
    var a = $(this).find(".sub-menu").html();
    $(".subber .sub-menu").html(a);

 }); 
});

...有一些CSS，它运作良好。原始子菜单HTML被复制到subber子菜单。

我希望每个子菜单子菜单相对于原始菜单项定位，即使它们出现在HTML的单独区域中。我可以以某种方式绑定这两个？

我的HTML代码：

<div class="header">
    <div id="navigation">
        <div class="site-navigation">
            <nav class="main-navigation">
                <ul class="menu-main-menu">
                    <li class="menu-item">
                        <a href="#">some text</a>
                    </li>
                    <li class="menu-item menu-item-has-children">
                        <a href="#">some text</a>
                        <ul class="sub-menu">
                            <li class="menu=item">
                                <a href="#">sub item text</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="#">some text</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="subber">
        <div class="sub-menu"></div>
    </div>
</div>

Answer 1

由于HTML结构中没有实际的父子关系，因此没有CSS方法相对于顶级菜单项定位新的子菜单。

相反，您必须使用原始菜单项的坐标手动使用JS定位新的子菜单。

请记住，这个基本定位不会在两者之间产生“粘性”，因此如果您的主菜单移动（例如带有向上/向下切换状态的滑动菜单栏），您将不得不触发子菜单的更新使用监听器和功能进行菜单定位。

Codepen

$("#menuItem1").mouseover( function() {
  
  /* get original menu */
  var origMenu = $(this);
  
  /* grab content out of original sub-menu */
  var myContent = origMenu.find(".sub-menu").html();
  
  /* copy content over to new sub-menu outside of navigation */
  $(".subber .sub-menu").html(myContent);
  
  /* get the coordinates of the original menu item */
  var subberLeftOffset = origMenu.offset().left;
  var subberTopOffset = origMenu.offset().top + origMenu.innerHeight(true);
   
  /* re-position the new sub-menu so it appears below the original menu */
  $(".subber").offset({top: subberTopOffset, left: subberLeftOffset});;
 });

#origNavigation .sub-menu {
  visibility: hidden;
  height: 0px;
}


#menuItem1 {
  margin-top: 8em;
  margin-left: 8em;
  padding: 1em;
  width: 200px;
  border: 1px solid black;
}

<div id="origNavigation">
  <div id="menuItem1">
    Hello
  <div class="sub-menu">Sub-menu</div>
</div>

</div>

<div class="subber">
  <div class="sub-menu"></div>
</div>