JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul id="menu">
    <li>AAAAAA
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li>BBBBBB
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li>CCCCCC
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li>DDDDDD
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li>EEEEEE
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
</ul>

CSS

ul#menu {
    float:left;
    width:100%;
    margin:0;
    padding:0;
    list-style-type:none;
    background-color:#D60024;
}
ul#menu > li {
    float:left;
    display:inline;
    position:relative;
    padding:3px;
    border:1px #8a0505 solid;
    background-color:#D60024;
    color:white;
}
ul#menu > li:hover {
    background:#8a0505;
    color:white;
}
ul#menu > li:hover ul {
    opacity:1;
    left:0;
    height:auto;
}
ul#menu li ul {
    position:absolute;
    float:left;
    width:100px;
    height:0;
    padding: 0;
    margin:0;
    opacity:0;
    top:100%;
    margin-left:-2px;
}
ul#menu ul li {
    background-color:#D60024;
    border:1px #8a0505 solid;
}
ul#menu ul li:hover {
    background:#8a0505;
    border:1px #8a0505 solid;
    color:white;
}