JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sty">
    <ul class="met_clean_list">
      <li><a href="#">Link 01</a></li>
        <ul>
          <li><b><a href="#">Sublink 01</a></b></li>
          <li><b><a href="#">Sublink 02</a></b></li>
        </ul>
      <li><a href="#">Link 02</a></li>
      <li><a href="#">Link 03</a></li>
    </ul>          
  </div>

CSS

.sty {
  background:#aaa;
  float:left;
  width:600px;
}


.sty ul li  {
  list-style:none;
  position:relative;
  padding:25px 10px;
  float:left;
}

.sty ul ul{
display:none;
}



.met_clean_list:hover ul {
 display:block;
 background:red;
}