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

Question

我有一个 WordPress 菜单。显示下拉菜单时出现重叠问题。我有 newsletter last-child li with position: absolute;和 底部。

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

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

$('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>

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

Answer 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>