JSFiddle - React, Tailwind, and code Playground

HTML

<div class="men_tp"> 
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="About Us.html">ABOUT US</a></li>
        <li><a href="#">TRAINING</a></li>
        <li><a href="#">PUBLISHING</a></li>
        <li><a href="#">CONFERENCES</a></li>
        <li><a href="#">RESEARCH</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>                
             </ul>
        </li>
        <li><a href="#">CONTACT US</a></li>
    </ul>
</div>

CSS

ul {list-style-type:none;padding:0}
.men_tp ul li{display:inline-block;position:relative;width:120px;height:20px}
.men_tp ul li ul{display:none;position:absolute;top:20px;left:0}
.men_tp ul li:hover > ul{display:block}
.men_tp ul li ul li{display:block}
.men_tp ul li ul li ul{display:none;position:absolute;top:0;left:120px}
.men_tp ul li ul li:hover > ul{display:block}