时间戳

首页 > 解决方案 > 当菜单可滚动时，将子菜单保持在屏幕底部

javascript - 当菜单可滚动时，将子菜单保持在屏幕底部

问题描述

我创建了一个垂直可滚动菜单，其中包括许多主要类别。
当有人将鼠标悬停在一个主要类别上时，它将向他显示一个子菜单。我希望这个子菜单与主类别具有相同的高度。
但是当主菜单滚动时，子菜单超出了高度。以不超过高度并锁定在底部的方式完成？
我正在向您发送一些图像以了解问题。
正确 正确
现在主菜单滚动
错误时的一些图像 错误

我的 twig-html 代码是： 

<div class="dd_menu">
   <ul class="nav-main">
      {% for item in menuProducts.items %}
      <li class="nav-main-item {{ item.classes|join(' ') }}">
         {% set term = Term(item.object_id) %}
         <div class="submenu__image"></div>
         <a class="dd_menu_a" href="{{ item.link }}">{{ item.title }}
         <i class="fa fa-angle-right arrow_icon"></i>
         </a>
         {% if item.children %}
         <div class="nav-drop">
            <ul>
               {% for child in item.children %}
               <li class="nav-drop-item">
                  <a href="{{ child.link }}">{{ child.title }}</a>
               </li>
               {% endfor %}
            </ul>
         </div>
         {% endif %}
      </li>
      {% endfor %}
   </ul>
</div>

我的CSS代码代码是： 

.nav-drop {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    background: #fff;
    display: none;
    text-align: center;
    padding: 20px 0 20px 0;
    background: #fff;
}

.dd_menu ul li a.dd_menu_a.active + .nav-drop{
    display: block;
}

我的 javascript 代码是： 

var dd_menu_a = document.querySelectorAll(".dd_menu_a");

dd_menu_a.forEach(function(dd_menu_item){
    dd_menu_item.addEventListener("mouseover", function(){
        dd_menu_a.forEach(function(dd_menu_item){
            jQuery(".nav-main__brands__items").removeClass("active");
            dd_menu_item.classList.remove("active");
        })
        dd_menu_item.classList.add("active");
    })
})

标签： javascripthtmlcss

解决方案

即使我不完全确定您在这里尝试完成什么，但对于您显示的屏幕截图中的子菜单，使用::after伪元素更加方便和明智。所以我建议检查一下

推荐阅读