Javascript 如何使用水平菜单中的绝对位置向下推内容？

我想要这个菜单：按下或向下移动内容，可以吗？因为当我在“子菜单”中将位置更改为“相对”（它推动）时，标记a不会继续在与示例相同的行中。非常感谢您的帮助。

您必须在HTML结构中添加类似的内容

<menu>
    <ul>
        <!-- main menu -->
    </ul>
</menu>
<nav>
    <!-- sub navigation -->
</nav>
<main>
    <!-- your content -->
</main>

---

另一方面，jQuery 3.0

.show（）

和

.hide（）

做的事情与切换

显示：无不同
您能否显示菜单的代码而不是提供链接？我们想看看你做了什么，而不是这个例子。这是非常可能的，而且有不止一种方法可以让它工作。你需要向我们展示你到目前为止所做的事情，以及你到底遇到了什么困难-社区可以在这一点上提供帮助。我不想通读整个代码，但我认为当菜单打开时，你可能可以在导航栏中添加一个大的
边距底部
。
//in main menu
<li data-menu="downloads"></li>

//in sub navigation
<div id="downloads"></div>

$('menu').on('click', 'li', function(){
   //get the id of the li
   var id = $(this).attr('data-menu');
   //select the correct element and check it's current visibility
   var navigation = $('#' + id);
   var isHidden = navigation.is(':hidden'); //returns true or false
   //close all navigation items
   $('nav').children('div').hide();
   //if the navigation item was hidden, show it
   if(isHidden){navigation.show()};
});