防止下拉菜单将 div 推到下面答案

【问题标题】：Prevent dropdown menu to push div underneath防止下拉菜单将 div 推到下面
【发布时间】：2020-09-20 18:00:03
【问题描述】：

我正在为电子商务平台开发一个 Angular 项目，但我遇到了一些下拉菜单问题。菜单将下面的 div 向下推，但我想越过它，而不是推它。这是一些图像：

点击菜单后：

虽然我正在尝试实现这一点（这是模板 html 页面）：

如您所见，菜单越过下面的 div 并且不会将其向下推。这是代码：

$('.hero__categories__all').on('click', function(){
      $('.hero__categories ul').slideToggle(400);
  });

.hero.hero-normal {
  padding-bottom: 30px;
  z-index: 1000;
}

.hero.hero-normal .hero__categories {
  position: relative;
}

.hero.hero-normal .hero__categories ul {
	display: none;
	position: absolute;
	left: 0;
	top: 46px;
	width: 100%;
	z-index: 1000;
	background: #ffffff;
}
.hero__categories__all {
	background: #7fad39;
  position: relative;
  z-index: 1000;
	padding: 10px 25px 10px 40px;
	cursor: pointer;
}

.hero__categories__all i {
	font-size: 16px;
	color: #ffffff;
	margin-right: 10px;
}

.hero__categories__all span {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
}

.hero__categories__all:after {
	position: absolute;
	right: 18px;
	top: 9px;
	content: "3";
	font-family: "ElegantIcons";
	font-size: 18px;
  color: #ffffff;
  z-index: 1000;
}

.hero__categories ul {
	border: 1px solid #ebebeb;
	padding-left: 40px;
  padding-top: 10px;
  z-index: 1000;
  padding-bottom: 12px;
}

.hero__categories ul li {
	list-style: none;
}

.hero__categories ul li a {
	font-size: 16px;
	color: #1c1c1c;
	line-height: 39px;
	display: block;
}

<div class="hero__categories">
                  <div class="hero__categories__all">
                      <i class="fa fa-bars"></i>
                      <span>Categorie</span>
                  </div>
                  <ul>
                      <li *ngFor="let category of categories">
                        <a href="/products/{{category.name.replace(' ', '_') | lowercase}}">
                          {{category.name}}
                        </a>
                      </li>
                  </ul>
              </div>
</div>

我并不是真正的 CSS 和 HTML 专家，所以感谢您的帮助！

编辑 1

我在 css 代码中为 ul 提供了 position: absolute ，现在发生了这种情况：

【问题讨论】：

您提供的代码有效。检查here
什么意思？正如您在图片中看到的那样，我提供的下拉菜单将另一个视图向下推。我提供的代码实际上是在一个组件中，下面的每个其他组件都被下推。我试图在菜单下插入另一个 div，问题是一样的。我真的不知道为什么你的代码有效而我的无效
你能提供演示代码吗？以便我可以测试它..因为当前代码没有这样的行为？

标签： html jquery css angular

【解决方案1】：

我设法解决了这个问题，我所要做的就是将 css 中的 position: absolute 添加到 ul 元素和 top 和 left 属性来代替 padding-top 和 padding-left。我还删除了 padding-bottom

【讨论】：