如何阻止<li>崩溃？

Question

此处黄色为<li>，<ul>的孩子<li>或<ul>没有float:left或display:inline为我可以在<li>或<ul>

上应用浮动或显示

粉红色<li>是嵌套<ul>的子项，将其外观更改为this

<ul class="top_nav">
  <li>name

    <ul class="sub_nav">
      <li>name1 icnkdn ndkcnks kkncksn </li>
      <li>name2</li>
      <li>name3</li>
    </ul>

  </li>
  <li>home</li>
</ul>


.top_nav{
  list-style-type:none;
  padding:0;
}

.top_nav > li  {
  padding:1em 2em;
  background:yellow;
  position:relative;
}

.sub_nav{
  position:absolute;
  z-index:1;
  background:green;
}

.sub_nav  li{
  display:block;
  background:pink;
  padding:1em 3em;
}

https://codepen.io/labeeb/pen/zRxoOR

Answer 1

您的.sub_nav有position: absolute;这就是您的<li>元素被折叠的原因。删除此属性，一切都会好的。