【问题标题】：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>
你能帮我解决这个问题吗？
【问题讨论】：
标签：
jquery
html
css
drop-down-menu
menu
【解决方案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>