JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li class="show">one
        <div class="sub">1</div>
        <div class="sub">2</div>
        <div class="sub">3</div>
    </li>
    <li class="show">one
        <div class="sub">1</div>
        <div class="sub">2</div>
        <div class="sub">3</div></li>
    <li>three</li>
</ul>

CSS

#nav{
    padding:0;
    margin:0;
    list-style-type:none;
}
#nav li {
float: left;
width: 150px;
background: #B0C4DE;
border: 1px solid #808080;
text-align: center;
color: #808080;
}
.sub{
    display:none;
    border: 1px solid #808080;
    width:350px;
}
.show:hover .sub{
    display:block;
}