JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<ul id="parent">
    <li> 
      <a href="">
        <span>parent one</span>
      
      </a>
      <ul class="child">
         <li>child one</li>
         <li>child two</li>
         <li>child three</li>
         <li>child four</li>
         <li>child five</li>
         <li>child six</li>
      </ul>
    </li>
    <li>
      <a href=""><span>parent two</span></a>
      <ul class="child">
         <li>child one</li>
         <li>child two</li>
         <li>child three</li>
         <li>child four</li>
         <li>child five</li>
         <li>child six</li>
      </ul>
    </li>
    <li>
      <a href=""><span>parent three</span></a>
      <ul class="child">
         <li>child one</li>
         <li>child one</li>
         <li>child one</li>
         <li>child one</li>
         <li>child one</li>
         <li>child one</li>
      </ul>
    </li>
    <li>
      <a href=""><span>parent four</span></a>
      <ul class="child">
         <li>child two</li>
         <li>child two</li>
         <li>child two</li>
         <li>child two</li>
         <li>child two</li>
         <li>child two</li>
      </ul>
    </li>
    <li>
      <a href=""><span>parent five</span></a>
      <ul class="child">
         <li>child three</li>
         <li>child three</li>
         <li>child three</li>
         <li>child three</li>
         <li>child three</li>
         <li>child three</li>
      </ul>
    </li>
    <li>
      <a href=""><span>parent five</span></a>
      <ul class="child">
         <li>child four</li>
         <li>child four</li>
         <li>child four</li>
         <li>child four</li>
         <li>child four</li>
         <li>child four</li>
      </ul>
    </li>
    <li>
      <a href=""><span>parent five</span></a>
      <ul class="child">
         <li>child five</li>
         <li>child five</li>
         <li>child five</li>
         <li>child five</li>
         <li>child five</li>
         <li>child five</li>
      </ul>
    </li>
    <li>
      <a...

CSS

ul {
  padding:0;
  margin:0;
  position:relative;
  list-style:none;
  width:400px;
  border-bottom:1px solid #ddd;
}
ul li{
  border:1px solid #ddd;
  background-color:#eee;
  border-bottom:1px solid #fff;
  color:#444;
  chrsor:pointer;
  padding:10px;
}
ul li a{
  color:#000;
  display:block;
}
.child{
  position: absolute;
  left: 400px;
  top: 0;
  display:none;
}

#parent li:hover .child{
 display:block;
}
ul li:hover a{
  color:red;
}