JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="main">
    <div id="strip">
        <ul class="strip" id="btn">
            <li id="shrt"><a href="#">Com</a></li>
             <div class="dropcmpy">
        <a href="#">Key</a>
        <a href="#">Ad</a>
        <a href="#">Fac</a>
        <a href="#">Car</a>
        <a href="#">FAQ</a>
    </div>
        </ul>
       
    </div>
   
</div>

CSS

#strip{
    width: 950px;
    height: 28px;
    background-color: #2c276d;
    font-size: 10pt;
}

.strip{
    margin:0;
    padding: 0;
}

.strip li{
    list-style-type: none;
    float: left;
}

.strip li a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    width:140px;
    height:23px;
    padding-top:5px;
    border-right: 1px solid #FFFFFF;
}

.strip li.shrt a{
    width: 145px;   
}
.dropcmpy {
    display: none;
    position: absolute;
    background-color: #2c276d;
    font-size: 10pt;
    width: 145px;
}

.dropcmpy a {   
    color: white;
    display: block;
    text-decoration: none;
    padding: 5px;
    border-top: 1px solid #FFFFFF;
}

.strip li a:hover{
    background-color: #28A2D5;
}

li.shrt:hover .dropcmpy {
    display: block;
}

#btn:hover .dropcmpy{
        display: block!important;
    }