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

我正在尝试更改站点的子菜单行为。原来的子菜单显示为下拉菜单，我希望它显示在一个单独的完整水平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);

 }); 
});

jQuery（文档）.ready（函数（$）{
$（“.header”）。追加（“”）；
$（“.main navigation ul li.菜单项有子项”）.mouseover（函数（）{
var a=$（this.find（“.sub-menu”）.html（）；
$（“.subber.submenu”）.html（a）；
}); 
});

。。。使用一些css，它工作得很好。原始子菜单HTML被复制到子菜单

我希望每个子菜单相对于原始菜单项进行定位，即使它们出现在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>

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

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

请记住，这种基本定位不会在两者之间产生“粘性”，因此，如果主菜单移动（例如，具有向上/向下切换状态的滑动菜单栏），则必须使用侦听器和函数触发对子菜单定位的更新

$（“#菜单项1”）.mouseover（函数（）{
/*获取原始菜单*/
var origMenu=$（此项）；
/*从原始子菜单中抓取内容*/
var myContent=origMenu.find（“.sub-menu”）.html（）；
/*将内容复制到导航之外的新子菜单*/
$（“.subber.submenu”）.html（myContent）；
/*获取原始菜单项的坐标*/
var subberleftofset=origMenu.offset（）.left；
var subberTopOffset=origMenu.offset（）.top+origMenu.innerHeight（true）；
/*重新定位新的子菜单，使其显示在原始菜单下方*/
$（“.subber”）.offset（{top:subbertoffset，left:subberleftofset}）；；
});
#origNavigation.子菜单{
可见性：隐藏；
高度：0px；
}
#菜单项1{
边缘顶部：8em；
左边距：8em；
填充：1em；
宽度：200px；
边框：1px纯黑；
}

你好
子菜单
请在此处添加所有相关代码，并删除外部链接。我们无法知道链接指向何处，我个人不会单击此处的外部链接。谢谢，我添加了html代码：）抱歉，没有任何问题这可以通过CSS轻松实现，不需要javascript-但您需要更改html结构。可以吗？无法更改html。。。我会这么做：）这就是为什么我尝试使用jquery。。。谢谢！您是否尝试了我下面的解决方案？