1. 技术文章
  2. Is it possible to force the last li menu content at the bottom when the li list is absolute and dropdown is open?

Is it possible to force the last li menu content at the bottom when the li list is absolute and dropdown is open?

由 穿精又带淫゛_ 提交于 2020-01-16 11:30:07

问题


I have a WordPress menu. I am getting an overlap issue when the dropdown menu displaying. I have newsletter last-child li with position: absolute; and bottom.

First screenshot ----------------------------Second screenshot

In the second screenshot overlaying the menu content. So it possible to force the content at the 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>
Would you help me out with this?

回答1:


You could try a flexbox solution: 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>


来源：https://stackoverflow.com/questions/59488293/is-it-possible-to-force-the-last-li-menu-content-at-the-bottom-when-the-li-list

标签
jquery
html
css
drop-down-menu
menu
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!