<ul>
  <li><p>Languages</p></li>
  <li><p>Friends</p></li>
  <li><p>Home</p></li>
  <li><p>About</p></li>
  <li>
    <input type="checkbox" id="trigger1"/>
    <label for="trigger1"  class="menu-item"><p class="menu-item">Comfort List</p></label>
    <ul class="sublist">
      <li>Milk</li>
      <li>Cold</li>
      <li>Bread</li>
      <li>Biochemistry</li>
      <li>Coding</li>
    </ul>
    
  </li>
</ul>
body{
  background:#2196F3;
  font-family:Roboto;
}
ul{cursor:pointer; padding:0;margin:0;list-style:none;}
.sublist{
  opacity:0;
  transition:opacity .5s ease-in-out;
  position:absolute;left:0;width:100%;
}
.menu-item:hover ~ .sublist{opacity:.5;}
[type="checkbox"]{display:none;}
[type="checkbox"]:checked ~ .sublist{opacity:1;}
ul:not(.sublist){
  display:flex;
  flex-wrap:wrap;
}
ul:not(.sublist)  > li{
  display:inline-block;
  background:white;
  position:relative;
  text-transform:uppercase;
  font-size:small;
  padding:0px 5px 0px 5px;
}
label{display:block; width:100%;height:auto;}
p{padding:10px; margin:0;}
[type="checkbox"] ~ label:hover, [type="checkbox"]:checked ~label {
  background:#bdd1db;
}
ul:not(.sublist)  > li:hover{background:#3398da;}
.sublist > li{
  background:#eeeeee;
  text-align:center;
  padding:.5em;
  font-size:12px;
 
}
.sublist > li{ color:#a7acb3;}
.sublist > li:hover{
  font-weight:600;
  background-color:lightgrey;color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.