html - 如何阻止此 崩溃？

Question

这里黄色是<li>这是 <ul> 的 child 此刻<li>或 <ul>没有float:left或 display:inline一旦我在 <li> 上应用 float 或显示或 <ul>

粉色<li>这是嵌套的 child <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>元素被折叠。去掉这个属性，一切就OK了。