JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="custom-menu-group">
    <ul>
        <li><a href="">Home</a>
            <div class="open">
                <i class="fa fa-chevron-up"></i>
                <i class="fa fa-chevron-up"></i>
            </div>
            <ul>
                <li><a href="">Child of home</a></li>
                <li><a href="">Child of home</a></li>
                <li><a href="">Child of home</a></li>
            </ul>
        </li>
        <li><a href="">Stuff</a>
            <div class="open">
                <i class="fa fa-chevron-up"></i>
                <i class="fa fa-chevron-up"></i>
            </div>
            <ul>
                <li><a href="">Child Stuff</a>
                    <ul>
                        <li><a href="">Child child stuff</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.custom-menu-group ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    height: auto;
}

.custom-menu-group ul li {
    font-size: 14px;
}

.custom-menu-group > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.custom-menu-group a {
    display: inline-block;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
}

.custom-menu-group > ul > li {
    position: relative;
}

.custom-menu-group > ul > li > .open {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    width: 120px;
    height: 20px;
    z-index: 2;
}

.custom-menu-group > ul > li > .open i {
    position: absolute;
    left: 8px;
}

.custom-menu-group > ul > li > .open i:first-child {
    top: 0;
}

.custom-menu-group > ul > li > .open i:last-child {
    top: 6px;
}

.custom-menu-group > ul > li:hover > .open {
    display: block;
}

.custom-menu-group > ul > li:hover > ul {
    display: block;
    top: 40px;
    left: 0;
}

.custom-menu-group > ul > li > ul > li:hover > ul {
    display: block;
    top: 0;
    left: 120px;
}

.custom-menu-group > ul > li ul {
    display: none;
    position: absolute;
    width: 120px;
    background-color: grey;
}

.custom-menu-group > ul > li > a {
    background-color: red;
    color: white;
}