当 li 列表是绝对的并且下拉菜单打开时，是不是可以强制底部的最后一个 li 菜单内容？

Posted 2023-05-08

技术标签:

【中文标题】当 li 列表是绝对的并且下拉菜单打开时，是不是可以强制底部的最后一个 li 菜单内容？【英文标题】：Is it possible to force the last li menu content at the bottom when the li list is absolute and dropdown is open?当 li 列表是绝对的并且下拉菜单打开时，是否可以强制底部的最后一个 li 菜单内容？ 【发布时间】：2020-04-16 16:31:42 【问题描述】：

我有一个 WordPress 菜单。显示下拉菜单时出现重叠问题。我有newsletterlast-child li 和position: absolute；和bottom。

第一张截图----------------------------第二张截图

在覆盖菜单内容的第二个屏幕截图中。那么可以强制底部的内容吗？

$('body').on('click', 'ul#left-primary-menu li', function(e) 
  $('ul#left-primary-menu li').find('.sub-menu').stop().slideUp();
  $(this).closest('ul#left-primary-menu li').find('.sub-menu').stop().slideToggle();
);

#left-menu 
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #000;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;


#left-menu li,
#left-menu a 
  color: #fff;
  font-size: 24px


#left-side-menu .cp-menuNewsletter,
#left-side-menu .footerSocial ul 
  position: absolute;


#left-side-menu .cp-menuNewsletter 
  bottom: 15%;
  left: 25px;


#left-side-menu .footerSocial ul 
  bottom: 60px;


#left-side-menu .footerSocial a 
  color: #fff;


#left-side-menu ul ul.sub-menu 
  display: none;

<div class="" id="left-menu">
  <nav id="left-side-menu" class="main-navigation">

    <div class="menu-primary-container">
      <ul id="left-primary-menu" class="menu">
        <li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
          <ul class="sub-menu">
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>

          </ul>
        </li>
        <li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
          <ul class="sub-menu">
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>

          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
          </ul>
        </li>
        <li id="menu-item-16" class="cp-menuNewsletter smothscrollclass menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="" aria-current="page">Newsletter</a></li>
      </ul>

    </div>
    <div class="footerSocial">
      <div class="chw-widget">
        <ul class="lsi-social-icons icon-set-lsi_widget-2">
          <li class="lsi-social-facebook"><a class="" rel="nofollow" title="Facebook" aria-label="Facebook" href="#" target="_blank">Facebook</a></li>
        </ul>
      </div>
    </div>

  </nav>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

你能帮我解决这个问题吗？

【问题讨论】：

【参考方案1】：

你可以试试 flexbox 解决方案：https://jsfiddle.net/Sirence/9xyecdz3/1/

$('body').on('click', 'ul#left-primary-menu li', function(e) 
  $('ul#left-primary-menu li').find('.sub-menu').stop().slideUp();
  $(this).closest('ul#left-primary-menu li').find('.sub-menu').stop().slideToggle();
);

#left-menu 
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #000;
  overflow-x: hidden;
  transition: 0.5s;

  
#left-side-menu 
  padding-top: 60px;
  height: calc(100% - 60px);
  display: flex;
  align-content: space-between;
  flex-direction: column;


.menu-primary-container 
  flex: 1;


#left-primary-menu 
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: flex-start;


#left-side-menu .cp-menuNewsletter 
  margin-top: auto;


#left-menu li,
#left-menu a 
  color: #fff;
  font-size: 24px;


#left-side-menu .footerSocial a 
  color: #fff;


#left-side-menu ul ul.sub-menu 
  display: none;

<div class="" id="left-menu">
  <nav id="left-side-menu" class="main-navigation">

    <div class="menu-primary-container">
      <ul id="left-primary-menu" class="menu">
        <li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
          <ul class="sub-menu">
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>
            <li id="" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>

          </ul>
        </li>
        <li id="menu-item-1044" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1044">Menu
          <ul class="sub-menu">
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
            <li id="menu-item-1053" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1053"><a href="">Submenu</a></li>
            <li id="menu-item-2001" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2001"><a href="">Submenu</a></li>

          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
          </ul>
        </li>

        <li id="menu-item-1051" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1051">Menu
          <ul class="sub-menu">
            <li id="menu-item-1052" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1052"><a href="">Submenu</a></li>
            <li id="menu-item-2000" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2000"><a href="">Submenu</a></li>
            <li id="menu-item-1711" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1711"><a href="">Submenu</a></li>
            <li id="menu-item-1045" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1045"><a href="">Submenu</a></li>
          </ul>
        </li>
        <li id="menu-item-16" class="cp-menuNewsletter smothscrollclass menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="" aria-current="page">Newsletter</a></li>
      </ul>

    </div>
    <div class="footerSocial">
      <div class="chw-widget">
        <ul class="lsi-social-icons icon-set-lsi_widget-2">
          <li class="lsi-social-facebook"><a class="" rel="nofollow" title="Facebook" aria-label="Facebook" href="#" target="_blank">Facebook</a></li>
        </ul>
      </div>
    </div>

  </nav>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

【讨论】：

但是flexbox会支持所有浏览器吗？

以上是关于当 li 列表是绝对的并且下拉菜单打开时，是不是可以强制底部的最后一个 li 菜单内容？的主要内容，如果未能解决你的问题，请参考以下文章

下拉打开时如何使链接处于活动状态？

Select2 搜索输入在打开时未获得焦点

Twitter bootstrap 在下拉菜单打开时停止传播

单击关闭时保持 Bootstrap 下拉菜单打开

Bootstrap 4.0.0右对齐导航栏下拉菜单打开时超出视口[重复]

css下拉菜单悬停时延迟1秒