Jquery 使菜单具有响应性

我有一个菜单，它显示了我创建的菜单

这是垂直菜单。我遇到的问题是，我在菜单中添加的

越多，就越难在屏幕上显示

例如：顶部菜单项（A）的大部分内容延伸到屏幕上方。想象一下，如果菜单有许多项（a、b、c、d…z），底部菜单项（z）将延伸到屏幕底部

为了解决我的问题，设想菜单中间的菜单项有很多元素。这也将超出屏幕顶部。这不是我想要的。事实上，我希望菜单弹出按钮能够响应周围的窗口，并适合自己的内部

我已经开始告诉每个小组，在他们表现出来之前，先集中注意力：

var groupList = $(e.target).find('.group-list');
groupList.css({
    'margin-top': (-groupList.height() / 2) + 'px'
});
groupList.show();

不幸的是，这还不够。然而，我不确定如何让每个人都意识到它周围的窗口，并做出足够的反应，使自己适应窗口

如何重写我的groupList.css（{}）代码，使groupList类响应并适合窗口？

---

编辑：我很抱歉这么罗嗦。我想解释一下我遇到的设计问题，以便大家都能理解，并希望能为我指出正确的方向。

如果我正确理解了您的需求，希望这能回答您的问题。我会得到整个lits项目/菜单周围包装的总高度。然后将其与某些变量进行比较，例如：

Var height=$（document）.height（）；//获取文档高度 变量宽度=$（窗口）.width（）

//然后随时将其与列表高度进行比较。如果高度达到所需的限制，则创建一个新列并将列表附加到该列。这样，它总是在调整大小，并且从不挂在windows视图端口之外

然后，您将创建弹出列表项所在的第二个框。将其与文档高度进行比较，并将底部css设置为0px

---

如果这没有帮助，请随时发电子邮件给我_brand@ymail.com，我将创建一个片段，向您展示我的解释示例。快乐编码，祝你好运

你说得对！我加了一个粗体的问题。