折算保证金问题

Question

我试图解决保证金崩溃问题。 我不明白为什么段重叠。 我真想知道为什么会出现这个问题。 我认为这就像崩溃边际问题一样。

请看看打击

这是我的HTML

    <div class="menu_list open">
      <ul>
        <li><a href="#/" class="router-link-active">Home</a></li>
        <li><a href="#/Story" >Story</a></li>
        <li><a href="#/Brands" >Brands</a></li>
        <li><a href="#/news" >News</a></li>
        <li><a href="#/contact" >Contact</a></li>
      </ul>
    </div>
    <div  class="company_detail_container container" style="background: #c9bbbb;">
<main  class="company_detail">

    <p >
    The new legislation would also sharply limit President Donald Trump's ability to lift any sanctions against Russia.
    He has previously said he needs diplomatic leeway with the Kremlin.
    Mr Trump's time in office has been dogged by claims that Russia tried to influence last year's US election.
    Moscow denies any wrongdoing but several US investigations are looking into whether anyone in the Trump campaign colluded with Russian officials.            </p>

</main>
</div>

这是我的css

.menu_list{
  width: 100%;
  height: 200px;
  top: 0;
  left: 0;
  opacity: 1;
  position: relative;
  padding: 10px;
}  

.menu_list li{
      display: block;
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid black;
    text-align: center;
}
p {
    margin: 0 0 10px;
}

请给我任何想法

https://codepen.io/jeonghu/pen/KvKPPO?editors=1100

Answer 1

原因很简单，您将.menu_list的高度修改为200px。删除该设置（将height设置为auto）并且它不再重叠

https://codepen.io/anon/pen/qXBWvK?editors=1100