JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Home</li>
  <li><label for="dd">Services +</label>
    <input type="checkbox" id="dd" hidden>
    <ul class="dropdown">
      <li>clean</li>
      <li>fix</li>
      <li>paint</li>
    </ul>
  </li>
  <li>contact</li>
</ul>

CSS

ul{
  background: blue;
  display:block;
  list-style-type: none;
  text-align:center;
  
}
ul li{
  display: inline-block;
  color: white;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 20px;
  padding: 10px 15px;;
  position:relative;
         -webkit-user-select: none;
     -moz-user-select: none;    
     -ms-user-select: none;  
     user-select: none;
}
ul li:hover{
  background: #f9a1c6;
  color: #000;
}
ul li .dropdown{
  display:none;
  width: 200px;
  padding:0; margin:0;
  background: green;
  position: absolute;
  top: 45px;
  left:0;
}
ul li .dropdown li{
  width:100%;
  display:block;
  padding:10px 0px; margin:0px;
}
#dd:checked ~ .dropdown{
  display:block;
}