JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="coolMenu">
        <li>
            <a href="#"> 
                <img src = "gear_icon.png" class = "nav" height = "20px" width = "20px" style="display:none">insertimage
            </a>
            <ul>
                <li>
                    <a href = "#"> Colors </a>
                    <ul>
                        <li><a href = "#"> Blue </a></li>
                        <li><a href = "#"> Green </a></li>
                        <li><a href = "#"> Red </a></li>
                    </ul>

                </li>
                <li><a href="#">Background</a></li>
                <li><a href="#">Indulgentia</a></li>
            </ul>
        </li>
    </ul>

CSS

#coolMenu, #coolMenu ul {
    list-style: none outside none;
}
#coolMenu {
    float: left;
}
#coolMenu > li {
    background-color: #FF0000;
    float: left;
    position: relative;
}
#coolMenu > li a {
    color: #FFFFFF;
}
#coolMenu li > ul {
    display: none;
    left: -40px;
    position: absolute;
    width: 100%;
    z-index: 999;
}
#coolMenu li > ul > li {
    background-color: #FF0000;
}
#coolMenu > li:hover > ul {
    display: block;
}
#coolMenu li > ul > li:hover > ul {
    display: block;
    position: absolute;
    left: 110px;
    top: 0px;
}
#coolMenu li > ul > li:hover{
    background-color:gold;
}
#coolMenu li a {
    display: block;
    text-decoration: none;
    padding:20px;
}
#coolMenu li > ul > li > ul li:hover{
    background-color:cyan;
}