0

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.

Sid Vishnoi
  • 1,250
  • 1
  • 16
  • 27

2 Answers2

1

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>
Pons Purushothaman
  • 2,225
  • 1
  • 14
  • 23
  • It works well https://codepen.io/sidvishnoi/pen/YaQJOq :) I will wait a little more for more answers (maybe without floats). Otherwise will mark yours as accepted. :) – Sid Vishnoi Mar 23 '18 at 10:59
  • This has been working great until we saw what happens on small screens :( – Sid Vishnoi Apr 06 '18 at 17:55
0

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>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
  • Thank you for this. But I should not edit the styles of things I do not own (`.aboveme`) – Sid Vishnoi Mar 23 '18 at 12:10
  • 1
    Yea I just used that to add some space, I added the space using the div wrapper instead, perhaps that will better suit what you need, core is the `relative` and `absolute` within that `relative` – Mark Schultheiss Mar 23 '18 at 17:25