javascript - 下拉菜单在屏幕底部被切断

Question

该网站需要至少 1080 像素的全屏浏览器才能访问完整的下拉菜单选项。

在我的分辨率为 1366x768 的笔记本电脑上，下拉菜单会超出屏幕(仅在底部)，并且无法访问大多数菜单项。我做了一些样式更改来调整它，但我不认为 CSS 可以修复它。我也尝试过一些JS脚本，但没有帮助。我不太擅长 JS 脚本。该网站(某种程度上)建立在基础框架上。

当菜单位于屏幕底部时，有没有办法自动调整下拉菜单，将其向上移动？我正在研究解决方案。如果有人以前解决过这个问题，我很想知道你是怎么做到的。

我想摆脱这些很长的下拉菜单，但这不会很快发生。

这是现有的行为:

| Menu      |                      
| Menu      |
| Menu      +------------------+
| Menu >>   | Sub Menu         |
| Menu      | Sub Menu         |               
+-----------+ Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            +------------------+

这是我在笔记本电脑上寻找的行为 - 当在屏幕底部时，第二个菜单应自动向上移动以显示所有菜单时间和子菜单项。

| Menu      |
| Menu      |
| Menu      +------------------+
| Menu      | Sub Menu         |
| Menu      | Sub Menu         |                      
| Menu      | Sub Menu         |
| Menu      | Sub Menu         |
| Menu >>   | Sub Menu         |
| Menu      | Sub Menu         |               
+-----------+ Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            +------------------+

更新: 我遇到的问题是我们使用的工具会自动创建下拉菜单。所以，我不能直接编辑 HTML。不过，我可以识别该类并操作 CSS。我确实尝试添加自定义 CSS，但它不起作用，并且使用没有 ID 的 JS 脚本也没有给出好的结果。

这是 HTML 代码:

<div class="nav-wrapper">
<ul class="navigation">                                            
 <li class="has-children" >
     <a href="">Top Nav Menu</a>
     <ul class="sub-menu">
         <li class="has-children" >
             <a href="">Dropdown Menu Level 1 </a>
             <ul class="sub-menu"><li data-mc-id="31">
                 <a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

我们有大约五个不同的下拉菜单，问题在于只有一个长菜单。我确实考虑过可滚动菜单，但考虑到我们使用的工具，实现起来可能很棘手。

谢谢!

Answer 1

Google 搜索 javascript 智能下拉菜单 或 javascript 下拉菜单调整到屏幕高度 会给出许多结果。

我喜欢this one ，它是 Vanilla Js，执行速度很快，但只能做两个级别。

This one可以做更多关卡，但需要 jQuery。

尽管如此，我喜欢你的想法“远离这些很长的下拉菜单”，使用 Mega Menus相反。