JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropdown">
    <li><a href="index.html"><img src='image/button/index1.png'
        onmouseover="this.src='image/button/index2.png'"
        onmouseout="this.src='image/button/index1.png'"></a></li>
    <li><a><img src='image/button/database1.png'
        onmouseover="this.src='image/button/database2.png'"
        onmouseout="this.src='image/button/database1.png'"></a>
        <ul>
            <li><a><img src='image/button/weapon1.png'
                onmouseover="this.src='image/button/weapon2.png'"
                onmouseout="this.src='image/button/weapon1.png'"></a>
                <ul>
                    <li><a><img src='image/button/warrior1.png'
                onmouseover="this.src='image/button/warrior2.png'"
                onmouseout="this.src='image/button/warrior1.png'"></a>
        <ul>
            <li><a href="topor-warrior.html"><img src='image/button/topor1.png'
                onmouseover="this.src='image/button/topor2.png'"
                onmouseout="this.src='image/button/topor1.png'"></a></li>
            <li><a href="shestoper-warrior.html"><img src='image/button/shestoper1.png'
                onmouseover="this.src='image/button/shestoper2.png'"
                onmouseout="this.src='image/button/shestoper1.png'"></a></li>
            <li><a href="mech-warrior.html"><img src='image/button/mech1.png'
                onmouseover="this.src='image/button/mech2.png'"
                onmouseout="this.src='image/button/mech1.png'"></a></li>
            <li><a href="shit-warrior.html"><img src='image/button/shit1.png'
                onmouseover="this.src='image/button/shit2.png'"
                onmouseout="this.src='image/button/shit1.png'"></a></li>
        </ul>
                    <li><a><img src='image/button/mage1.png'
                onmouseover="this.src='image/button/mage2.png'"
                onmouseout="this.src='image/button/mage1.png'"></a>
        <ul>
            <li><a href="posoh-mage.html"><img...

CSS

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.dropdown {
    position: relative;
    z-index: 597;
    float: left;
}

ul.dropdown li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
}

ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
}

ul.dropdown ul li {
    float: none;
}

ul.dropdown ul ul {
    top: 1px;
    left: 99%;
}

ul.dropdown li:hover > ul {
    visibility: visible;
}