JSFiddle - React, Tailwind, and code Playground

by a1ex

HTML

<ul class="menu">
    <li class="menu-item">
        <a href="#">item 1</a>
        <ul class="submenu">
            <li class="submenu-item"><a href="#">subitem 1.1</a></li>
            <li class="submenu-item"><a href="#">subitem 1.2</a></li>
            <li class="submenu-item"><a href="#">subitem 1.3</a></li>
        </ul>
   </li>
    <li class="menu-item">
        <a href="#">item 2</a>
        <ul class="submenu">
            <li class="submenu-item"><a href="#">subitem 2.1</a></li>
            <li class="submenu-item"><a href="#">subitem 2.2</a></li>
            <li class="submenu-item"><a href="#">subitem 2.3</a></li>
        </ul>
    </li>
</ul>

CSS

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .menu-item:hover > a {
    background: red;
    color:#fff;
}
.menu .submenu {
    position: absolute;
    margin: 0;
    padding: 0;
    background: #E1E1E1;
    list-style: none;
    
    opacity: 0;
	visibility: hidden;
	transition: all .3s ease .15s;
}
.menu .menu-item:hover .submenu {
    opacity: 1;
	visibility: visible;
}
.menu .submenu-item {
    padding: 5px 10px;
}