CSS Dropdown causing layout shift

Question

I'm trying to achieve this simple CSS dropdown effect:

Problems:

• I am not allowed to use a nested ul > li* > ul > li*. It has to be done using a ul > li* only. (Semantic HTML requirements). The task is trivial if we can wrap the hidden parts into a single div and show that only.
• All the approaches I have tried cause a layout reflow (the content below shifts on menu hover)
• Cannot use JS for this effect.

See the current demo and code here: 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>

It could be possible that I might be missing something trivial, or it could be quite a challenge.

Answer 1

Might not be perfect but a start.

// this is just for testing
// you are not allowed to use js to achieve desired effect
/*
const nomove = document.getElementById('nomove'); 
const pos = nomove.offsetTop; 
function alertOnMove() { 
  if (nomove.offsetTop !== pos) { 
    document.body.style.background = "#f98f8f"; 
  } else { 
    document.body.style.background = "white"; 
  }
}
document.body.addEventListener("mousemove", alertOnMove)
// */

.container{
  position: relative;
  height: 2em;
 }

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

.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: 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>
<div class="container">
<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>
</div>
<p id="nomove">this should not move<br>there is tons on content below</p>

Answer 2

Try this one. I hope this is what you are looking for.

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>