CSS Dropdown 导致布局偏移

Question

我正在尝试实现这个简单的 CSS 下拉效果:

问题:

• 我不允许使用嵌套的 ul > li* > ul > li*。它必须仅使用 ul > li* 来完成。 (语义 HTML 要求)。如果我们可以将隐藏的部分包装到一个 div 中并只显示它，那么任务就很简单了。
• 我尝试过的所有方法都会导致布局重排(菜单悬停时下面的内容会发生变化)
• 不能使用 JS 实现此效果。

在此处查看当前演示和代码:https://codepen.io/sidvishnoi/pen/dmRjNv?editors=0110

/* container for stats */
.caniuse-stats {
  font-size: 90%;
  display: flex;
  flex-wrap: wrap;
}

.caniuse-stats a[href] {
  margin-left: 5px;
  white-space: nowrap;
  padding: 4px;
}

/* wraps each browser into a separate column */
.caniuse-browser {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* a browser version */
.caniuse-cell {
  min-width: 100px;
  padding: 4px;
  background: #eee; /* default, for unknown support */
  margin: 1px;
}

.caniuse-cell:hover {
  font-weight: bold;
}

/* hide older versions  */
.caniuse-cell:nth-child(n + 2) {
  display: none;
}

/* show older browsers on hover */
.caniuse-browser:hover .caniuse-cell:nth-child(n + 2) {
  display: block;
}

/* supports */
.caniuse-cell.y {
  background: #8bc34a;
}

/* no support */
.caniuse-cell.n {
  background: #e53935;
}

/* not supported by default / partial support etc
see https://github.com/Fyrd/caniuse/blob/master/CONTRIBUTING.md for stats */
.caniuse-cell.d,
.caniuse-cell.a,
.caniuse-cell.x,
.caniuse-cell.p {
  background: #ffc107;
}

<p>this content should not be hidden. <br>there's is more above</p>
<dd class="caniuse-stats">
  <ul class="caniuse-browser">
    <li class="caniuse-cell y">Chrome 68</li>
    <li class="caniuse-cell y">67</li>
    <li class="caniuse-cell y">66</li>
    <li class="caniuse-cell y">65</li>
  </ul>
  <ul class="caniuse-browser">
    <li class="caniuse-cell n d">Firefox 61</li>
    <li class="caniuse-cell n d">60</li>
    <li class="caniuse-cell n d">59</li>
    <li class="caniuse-cell n d">58</li>
  </ul>
  <ul class="caniuse-browser">
    <li class="caniuse-cell y">Safari 11.1</li>
    <li class="caniuse-cell n">11</li>
    <li class="caniuse-cell n">10.1</li>
    <li class="caniuse-cell n">10</li>
  </ul>
  <a href="">More info</a>
</dd>
<p id="nomove">this should not move<br>there is tons on content below</p>

我可能遗漏了一些微不足道的东西，或者这可能是一个相当大的挑战。

Answer 1

试试这个。我希望这就是您要找的。

dd{
  width: 100%;
  float: left;
}
dd.caniuse-stats{
  height: 20px;
}
ul{
  position: relative;
  width: 150px;
  float: left;
  margin: 0 10px 0 0;
  padding: 0;
  list-style: none;
  height: auto;
}
li{
  width: 100%;
  line-height: 20px;
  float:left;
  display: none;
  background: green;
  margin: 2px 0;
}
li:first-child{
  display: block
}
ul:hover li{
  display: block;
}

<dd class="caniuse-stats">
  <ul class="caniuse-browser">
    <li class="caniuse-cell y">Chrome 68</li> <!-- shown default -->
    <li class="caniuse-cell y">67</li> <!-- shown on hover -->
    <li class="caniuse-cell y">66</li> <!-- shown on hover -->
  </ul>
  <ul class="caniuse-browser">
    <li class="caniuse-cell n d">Firefox 61</li>
    <li class="caniuse-cell n d">60</li>
    <li class="caniuse-cell n d">59</li>
  </ul>
</dd>
<dd>
  <p>
  Other contents here - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rhoncus purus vel libero mollis varius. Aliquam non diam erat. Donec leo tortor, volutpat nec placerat in, congue id tortor. Donec eget sem laoreet, rhoncus turpis in, dignissim dui. Sed condimentum porta neque vitae malesuada. Curabitur convallis euismod neque in fringilla. 
  <p>
</dd>